icon-button

The IconButton component wraps the Button component, but only renders an icon.

Import

import { IconButton } from '@xpanseinc/nebula'

Usage

The aria-label prop is required for screen readers. To improve usability, it is recommended to use an IconButton with a Tooltip.

<Tooltip content="Add" position="bottom">
  <IconButton aria-label="Add" icon={<PlusIcon />} />
</Tooltip>

Variant

Like the Button, pass a variant to change the button style

<IconButton variant="outline" aria-label="Add" icon={<PlusIcon />} />

Size

Like the Button, pass the size prop to change the button's size

<IconButton size="xs" aria-label="Add" icon={<PlusIcon />} />