Icon Button

Used to render an icon within a button

Usage

import { IconButton } from "chakra-ui-solid";

<IconButton aria-label="Search database">
  <SearchIcon />
</IconButton>

Examples

Sizes

Use the size prop to change the size of the button.

Variants

Use the variant prop to change its visual style

solid

subtle

surface

outline

ghost

Color

Use the colorPalette prop to change the color of the button

Rounded

Set rounded="full" to make the button fully rounded

Props

IconButton takes everything Button takes, and changes none of its defaults — only the padding, so the recipe’s min-width decides the shape.

IconButtonProps
Prop	Default	Type
`loading`	`false`	`boolean` Show a spinner and disable the control. The button keeps the width it had, because the {@link Loader} hides the children in place rather than removing them.
`loadingText`	—	`JSX.Element` Shown in place of the children while loading, with the spinner beside it.
`size`	`'md'`	`ConditionalValue<'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| PresetVariant<'button', 'size'>>` The control's height, padding, gap and type scale together.
`spinner`	—	`JSX.Element` What to spin. Defaults to a Spinner sized and coloured off the button's own label.
`spinnerPlacement`	`'start'`	`'start' \| 'end'` Which side of `loadingText` the spinner sits on. Only read when `loadingText` is passed.
`variant`	`'solid'`	`ConditionalValue<\| 'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain' \| PresetVariant<'button', 'variant'>>` How much of the colour palette the button spends — `solid` is the filled one, `plain` carries no background or border at all.

Plus HTMLChakraProps<"button"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.