Components

IconButton

An action button that shows only an icon and has a required accessible name.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

IconButton comes in the tertiary look and a 36 px square box. label names the button; the icon is decorative.

import { IconButton } from '@bigbang/ui';

export default function Default() {
  return <IconButton icon="x" label="Close" />;
}

Variants and tones

variant and tone take the same values as Button. Use one primary per region.

import { IconButton } from '@bigbang/ui';

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <IconButton variant="primary" icon="plus" label="Add" />
      <IconButton variant="secondary" icon="ellipsis" label="More actions" />
      <IconButton icon="x" label="Close" />
      <IconButton variant="secondary" tone="danger" icon="trash" label="Delete" />
    </div>
  );
}

Sizes and shape

size gives a 32, 36 or 40 px square box. shape="circle" makes the button fully round.

import { IconButton } from '@bigbang/ui';

export default function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <IconButton variant="secondary" size="sm" icon="plus" label="Add" />
      <IconButton variant="secondary" icon="plus" label="Add" />
      <IconButton variant="secondary" size="lg" icon="plus" label="Add" />
      <IconButton variant="primary" size="lg" shape="circle" icon="plus" label="Add" />
    </div>
  );
}

States

disabled removes the button from the tab order; focusableWhenDisabled keeps it focusable. loading puts a spinner in place of the icon.

import { IconButton, Provider } from '@bigbang/ui';

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-wrap items-center gap-md">
        <IconButton variant="secondary" icon="x" label="Close" disabled />
        <IconButton variant="secondary" icon="x" label="Close" disabled focusableWhenDisabled />
        <IconButton variant="primary" icon="plus" label="Add" loading />
      </div>
    </Provider>
  );
}

Light and dark mode

Colours come from the color-action-* tokens; light and dark mode need no extra setting.

import { IconButton } from '@bigbang/ui';

export default function Variants() {
  return (
    <div className="flex flex-wrap items-center gap-md">
      <IconButton variant="primary" icon="plus" label="Add" />
      <IconButton variant="secondary" icon="ellipsis" label="More actions" />
      <IconButton icon="x" label="Close" />
      <IconButton variant="secondary" tone="danger" icon="trash" label="Delete" />
    </div>
  );
}