Icon Button

Trigger an action or event, such as submitting a form or displaying a dialog.

Report Issue Github

Usage

Size

Use the size prop to control the size of the icon button.


<Flex gap="3" align="center">
  <IconButton size="small" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton size="medium" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton size="large" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton size="xlarge" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
</Flex>

Variant

Use the variant prop to control the visual style of the icon button.


<Flex align="center" gap="3">
  <IconButton variant="solid">
    <Icon type="Zap" />
  </IconButton>
  <IconButton variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton variant="transparent">
    <Icon type="Zap" />
  </IconButton>
  <IconButton variant="outlined">
    <Icon type="Zap" />
  </IconButton>
  <IconButton variant="translucent">
    <Icon type="Zap" />
  </IconButton>
</Flex>

Color

Use the color prop to assign a specific color, ignoring the global theme.


<Flex gap="3">
  <IconButton variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton color="indigo" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton color="cyan" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton color="orange" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton color="crimson" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
</Flex>

High-contrast

Use the highContrast prop to increase color contrast with the background.


<Flex direction="column" gap="3">
  <Flex gap="3">
    <IconButton variant="solid">
      <Icon type="Zap" />
    </IconButton>
    <IconButton variant="ghost">
      <Icon type="Zap" />
    </IconButton>
    <IconButton variant="transparent">
      <Icon type="Zap" />
    </IconButton>
    <IconButton variant="outlined">
      <Icon type="Zap" />
    </IconButton>
    <IconButton variant="translucent">
      <Icon type="Zap" />
    </IconButton>
  </Flex>
  <Flex gap="3">
    <IconButton variant="solid" highContrast>
      <Icon type="Zap" />
    </IconButton>
    <IconButton variant="ghost" highContrast>
      <Icon type="Zap" />
    </IconButton>
    <IconButton variant="transparent" highContrast>
      <Icon type="Zap" />
    </IconButton>
    <IconButton variant="outlined" highContrast>
      <Icon type="Zap" />
    </IconButton>
    <IconButton variant="translucent" highContrast>
      <Icon type="Zap" />
    </IconButton>
  </Flex>
</Flex>

Radius

Use the radius prop to assign a specific radius value, ignoring the global theme.


<Flex gap="3">
  <IconButton radius="none" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton radius="large" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
  <IconButton radius="full" variant="ghost">
    <Icon type="Zap" />
  </IconButton>
</Flex>

API

Props

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`variant`	`'solid' \| 'outlined' \| 'ghost' \| 'transparent' \| 'translucent'`	`'solid'`	-
`buttonType`	`'button' \| 'reset' \| 'submit'`	`'button'`	-
`justify`	`'start' \| 'center' \| 'end'`	`'center'`	-
`block`	`boolean`	-	-
`disabled`	`boolean`	-	-
`iconPrepend`	`ReactNode`	-	-
`iconAppend`	`ReactNode`	-	-
`href`	`string`	-	-
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`radius`	`ThemeRadius`	-	-
`size`	`Responsive<Size>`	`'medium'`	-
`highContrast`	`boolean`	-	-

Card

Typography