Use a IconButton to allow a user to perform an action related to the content
currently displayed. IconButton is particularly well suited for compact
parts of the interface such as toolbars and as a trigger for
Menu or Popover.
When to consider something else
If the action associated with an interaction is a navigation, consider using a
Link instead.
React
IconButton composes the Button component and
supports the same colors, sizes and variants.
A light color is also available for use on dark backgrounds.
When using the /next theme, the theming API for Button is slightly
different. The shape prop has no effect in the next theme and instead of
providing a fill, you'll want to specify the appropriate variant.
Theme Compatibility
It's possible to provide both fill and variant props to Button for
forward/backward compatibility between themes.
Enabling the Next Theme
See the Next Theme guide for instructions on how
to enable the /next theme in your project.
Variants
IconButton supports four variants when using the next theme, primary,
secondary, tertiary and ghost.
Button supports color modes when using the next theme, but sometimes a
design calls for the colorScheme to override the mode. Pass light or dark
to set the color explicitly.
live
<NextProvider attach fontsHost="/typography/">
<Stack
direction="row"
spacing="300"
alignItems="center"
p="400"
bg="neutral.800"
m="-400"
>
<IconButton
colorScheme="light"
variant="primary"
label="Primary"
icon={iHexagon}
/>
<IconButton
colorScheme="light"
variant="secondary"
label="Secondary"
icon={iHexagon}
/>
<IconButton
colorScheme="light"
variant="tertiary"
label="Tertiary"
icon={iHexagon}
/>
<IconButton
colorScheme="light"
variant="ghost"
label="Ghost"
icon={iHexagon}
/>
</Stack>
</NextProvider>
Shape
Shape is controlled via the shape prop and defaults to circle.