Icon Button

Used to render an icon within a button

import { IconButton } from "chakra-ui-solid";
import { SearchIcon } from "../components/site/icons";

export default function IconButtonBasic() {
  return (
    <IconButton aria-label="Search database">
      <SearchIcon />
    </IconButton>
  );
}

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.

import { HStack, IconButton, Text, VStack } from "chakra-ui-solid";
import { For } from "solid-js";
import { PhoneIcon } from "../components/site/icons";

export default function IconButtonWithSizes() {
  return (
    <HStack wrap="wrap" gap="8">
      <For each={["xs", "sm", "md", "lg"] as const}>
        {(size) => (
          <VStack>
            <IconButton aria-label="Search database" variant="outline" size={size}>
              <PhoneIcon />
            </IconButton>
            <Text textStyle="sm">{size}</Text>
          </VStack>
        )}
      </For>
    </HStack>
  );
}

Variants

Use the variant prop to change its visual style

solid

subtle

surface

outline

ghost

import { HStack, IconButton, Text, VStack } from "chakra-ui-solid";
import { For } from "solid-js";
import { VoicemailIcon } from "../components/site/icons";

export default function IconButtonWithVariants() {
  return (
    <HStack wrap="wrap" gap="8">
      <For each={["solid", "subtle", "surface", "outline", "ghost"] as const}>
        {(variant) => (
          <VStack>
            <IconButton aria-label="Call support" variant={variant}>
              <VoicemailIcon />
            </IconButton>
            <Text textStyle="sm">{variant}</Text>
          </VStack>
        )}
      </For>
    </HStack>
  );
}

Color

Use the colorPalette prop to change the color of the button

import { HStack, IconButton } from "chakra-ui-solid";
import { SearchIcon } from "../components/site/icons";

/**
 * The ten palettes written out, where the React version maps over a list.
 *
 * `colorPalette` is deliberately absent from the preset's `staticCss` — see the comment on it in
 * `packages/panda-preset/src/preset.ts` — so its rules come from Panda reading this file. A palette
 * it can only know at runtime reaches the element as a class with no rule, and every button here
 * renders in the default colour with nothing to say so (`CLAUDE.md`, *The hazard*). A literal
 * forwarded through a wrapper extracts fine, which is what `PaletteButton` is.
 */
export default function IconButtonWithColors() {
  return (
    <HStack wrap="wrap">
      <PaletteButton colorPalette="gray" />
      <PaletteButton colorPalette="red" />
      <PaletteButton colorPalette="green" />
      <PaletteButton colorPalette="blue" />
      <PaletteButton colorPalette="teal" />
      <PaletteButton colorPalette="pink" />
      <PaletteButton colorPalette="purple" />
      <PaletteButton colorPalette="cyan" />
      <PaletteButton colorPalette="orange" />
      <PaletteButton colorPalette="yellow" />
    </HStack>
  );
}

const PaletteButton = (props: { colorPalette: string }) => (
  <IconButton aria-label="Search database" colorPalette={props.colorPalette}>
    <SearchIcon />
  </IconButton>
);

Rounded

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

import { IconButton } from "chakra-ui-solid";
import { VoicemailIcon } from "../components/site/icons";

export default function IconButtonRounded() {
  return (
    <IconButton aria-label="Call support" rounded="full">
      <VoicemailIcon />
    </IconButton>
  );
}

Props

IconButton takes everything Button takes.

ButtonProps
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'>` 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'>` How much of the colour palette the button spends — `solid` is the filled one, `plain` carries no background or border at all.

Plus everything it inherits — 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.