Skip to main content

IconButton

Examples

IconButton

View standalone

Rendered as a <button> by default. The icon can be specified using the icon prop. Also includes a branded variant for different contexts.

Code
<Flex gap="16px">
  <IconButton
    icon={<ChevronRightIcon />}
    label="Slide Right"
  />
  <IconButton
    icon={<ChevronRightIcon />}
    label="Slide Right"
    variant="brand"
  />
</Flex>

Inverted

View standalone

<IconButton> can be inverted for a more subtle appearance. Best used on darker backgrounds.

Code
<Box
  atoms={{
    backgroundColor: 'global-default',
    borderRadius: '8px',
    display: 'inline-block',
    padding: '16px'
  }}
  theme="dark"
>
  <Flex gap="16px">
    <IconButton
      icon={<PauseIcon />}
      inverted
      label="Play"
    />
    <IconButton
      icon={<PauseIcon />}
      inverted
      label="Play"
      variant="brand"
    />
  </Flex>
</Box>

With onClick Handler

View standalone
Code
<IconButton
  icon={<PlayIcon />}
  label="Play"
  onClick={function noRefCheck() {}}
/>

IconButton with tabIndex

View standalone

<button> is not keyboard focusable with tabIndex={-1}.

Code
<IconButton
  icon={<ChevronRightIcon />}
  label="Slide Right"
  tabIndex={-1}
/>

Props

variant

"default" | "brand"

Default: "default"

inverted

boolean

Default: false

as

"button" | "div"

Default: "button"

icon

ReactNode

Specified icon will be rendered in center of button.

label

ReactNode

Labels the specified icon. If `null` is passed the button will be hidden from assistive devices.