Icon Button - React

import { IconButton } from '@sky-uk/ui-core';

The IconButton provides an interactive wrapper for a Skycon for supplementary actions.

<IconButton src={informationCircleLinear} />

Props

src

The src prop expects a partial SVG path of the icon that you want to render. It is recommend to use icons from the Skycons package. See the Skycons documentation page for more information.

$appearance

We provide a light version of the IconButton for when we need light UI to sit over a dark background or asset.

• default
• light

<Flex $alignItems="center" $gap={4}>
  <IconButton src={informationCircleLinear} />

  <Box $bgColor="grey80" $padding={3}>
    <IconButton $appearance="light" src={informationCircleLinear} />
  </Box>
</Flex>

$variant

• solid (default)
• minimal

<Flex $alignItems="center" $gap={4}>
  <IconButton $variant="solid" src={informationCircleLinear} />
  <IconButton $variant="minimal" src={informationCircleLinear} />
</Flex>

$size

• small
• medium (default)
• large

<Flex $alignItems="center" $gap={4}>
  <IconButton $size="small" src={informationCircleLinear} />
  <IconButton $size="medium" src={informationCircleLinear} />
  <IconButton $size="large" src={informationCircleLinear} />
</Flex>

States

Disabled

An IconButton can be set to disabled, however this should only be used when absolutely required such as inactive navigation items, see the IconButton usage page for more.

<Flex $alignItems="center" $gap={4}>
  <IconButton disabled src={informationCircleLinear} />

  <Box $bgColor="grey80" $padding={3}>
    <IconButton $appearance="light" disabled src={informationCircleLinear} />
  </Box>
</Flex>

Hover and Focus

The hover and focus state can be set via $hover and $focused respectively to override default behaviour.

<Flex $alignItems="center" $gap={4}>
  <IconButton $hover src={informationCircleLinear} />
  <IconButton $focused src={informationCircleLinear} />
</Flex>

Accessibility

If you are using an IconButton without a visual label consider adding IconButton.HiddenText. This will support users who need screen readers by providing a visually hidden description.

<IconButton src={informationCircleLinear}>
  <IconButton.HiddenText>Contextual Information</IconButton.HiddenText>
</IconButton>

System Modifiers

The IconButton component supports the props applied using the following system modifiers:

• display
• margin
• width