IconButton

A button that displays an icon instead of text, ideal for compact actions.

import { IconButton } from '@fidely-ui/react/icon-button'
import { GiThumbUp } from 'react-icons/gi'

export const IconButtonBasics = () => {
  return (
    <IconButton aria-label="Thumbs Up">
      <GiThumbUp />
    </IconButton>
  )
}

Usage

import { IconButton } from '@fidely-ui/react'

<IconButton>
  <YourCustomIcon />
</IconButton>

Sizes

You can control the size of the Button using the size prop.

import { IconButton, HStack } from '@fidely-ui/react'
import { FaRegUser } from 'react-icons/fa6'

export const IconButtonSize = () => {
  return (
    <HStack gap="6">
      <IconButton size="xs">
        <FaRegUser />
      </IconButton>
      <IconButton size="sm">
        <FaRegUser />
      </IconButton>
      <IconButton size="md">
        <FaRegUser />
      </IconButton>
      <IconButton size="lg">
        <FaRegUser />
      </IconButton>
      <IconButton size="xl">
        <FaRegUser />
      </IconButton>
    </HStack>
  )
}

Variants

You can control the appearance of the icon-button using the variant prop.

import { IconButton, HStack } from '@fidely-ui/react'
import { FaRegUser } from 'react-icons/fa6'

export const IconButtonVariant = () => {
  return (
    <HStack gap="6">
      <IconButton variant={'solid'}>
        <FaRegUser />
      </IconButton>
      <IconButton variant={'subtle'}>
        <FaRegUser />
      </IconButton>
      <IconButton variant={'ghost'}>
        <FaRegUser />
      </IconButton>
      <IconButton variant={'outline'}>
        <FaRegUser />
      </IconButton>
      <IconButton variant={'plain'}>
        <FaRegUser />
      </IconButton>
    </HStack>
  )
}

ColorPalette

Use the colorPalette prop to change the color and background appearance of the icon-button.

import { IconButton, HStack } from '@fidely-ui/react'
import { FaRegUser } from 'react-icons/fa6'

export const IconButtonColors = () => {
  return (
    <HStack gap="6">
      <IconButton variant={'solid'} colorPalette={'orange'}>
        <FaRegUser />
      </IconButton>
      <IconButton variant={'subtle'} colorPalette={'blue'}>
        <FaRegUser />
      </IconButton>
      <IconButton variant={'ghost'} colorPalette={'purple'}>
        <FaRegUser />
      </IconButton>
      <IconButton variant={'outline'} colorPalette={'green'}>
        <FaRegUser />
      </IconButton>
      <IconButton variant={'solid'} colorPalette={'red'}>
        <FaRegUser />
      </IconButton>
    </HStack>
  )
}

With Spinner

When using IconButton with spinner pass the isLoading prop

import { HStack } from '@fidely-ui/react'
import { IconButton } from '@fidely-ui/react/icon-button'
import {
  BeatLoader,
  DotLoader,
  BounceLoader,
  ClockLoader,
} from 'react-spinners'

export const IconButtonSpinner = () => {
  return (
    <HStack gap={3}>
      <IconButton aria-label="spinner" isLoading colorPalette={'orange'} />
      <IconButton
        aria-label="spinner"
        isLoading
        spinner={<BeatLoader size={8} color="green" />}
      />
      <IconButton
        aria-label="spinner"
        isLoading
        spinner={<DotLoader size={18} color="white" />}
      />

      <IconButton
        aria-label="spinner"
        isLoading
        spinner={<BounceLoader size={18} color="purple" />}
      />
      <IconButton
        aria-label="spinner"
        isLoading
        spinner={<ClockLoader size={18} color="white" />}
      />
      <IconButton aria-label="spinner" isLoading />
    </HStack>
  )
}

Props

IconButton

Prop	Default	Type	Description
`aria-label`	`-`	`string`	aria-label for.
`colorPalette`	`gray`	`"red" \| "blue" \| "green" \| "purple" \| "orange" \| "gray"`	The color palette of the component.
`size`	`md`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	The size of the button.
`variant`	`solid`	`'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'plain'`	The variant that defines the button's visual style.
`loading`	—	`boolean \| undefined`	If `true`, the button will display a loading spinner.
`loadingText`	—	`React.ReactNode \| undefined`	The text to display while the button is loading.
`spinner`	—	`React.ReactNode \| undefined`	The spinner element to render while loading.
`as`	—	`React.ElementType`	The underlying element to render.
`asChild`	`false`	`boolean`	Use the provided child element as the default rendered element, combining their props and behavior.