Skip to main content

IconButton

Examples

IconButton

Rendered as a <button> by default. The icon can be specified using the icon prop. Also includes brand and tertiary variants for different contexts.

Code
<Flex
  atoms={{
    backgroundColor: 'global-well',
    borderRadius: 'card',
    padding: '16px'
  }}
  gap="16px"
>
  <UnknownElementType
    icon={<ChevronRightIcon />}
    label="Slide Right"
  />
  <UnknownElementType
    icon={<ChevronRightIcon />}
    label="Slide Right"
    variant="brand"
  />
  <UnknownElementType
    icon={<ChevronRightIcon />}
    label="Slide Right"
    variant="tertiary"
  />
</Flex>

Inline

Using the inline prop makes <IconButton /> render more appropriately within inline layouts.

Code
<Stack
  atoms={{
    backgroundColor: 'global-well',
    borderRadius: 'card',
    padding: '16px'
  }}
  gap="16px"
>
  <Flex gap="16px">
    <UnknownElementType
      icon={<ChevronRightIcon />}
      inline
      label="Slide Right"
    />
    <UnknownElementType>
      Discover more
    </UnknownElementType>
  </Flex>
  <Flex gap="16px">
    <UnknownElementType
      icon={<ChevronRightIcon />}
      inline
      label="Slide Right"
      variant="tertiary"
    />
    <UnknownElementType variant="textTertiary">
      Discover more
    </UnknownElementType>
  </Flex>
</Stack>

Inverted

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

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

With onClick Handler

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

IconButton with tabIndex

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

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

Props

variant

"default" | "brand" | "tertiary"

Default: "default"

inverted

boolean

Default: false

inline

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.