Components

SplitButton

A button that joins a main action to a menu button listing related actions.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls. Open the menu button to see the chevron turn and the menu grow from the button.

Live example, StorybookOpen in Storybook

Default

SplitButton shows the main action and a chevron menu button in an attached group. menuLabel is required.

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

export default function Default() {
  return (
    <Provider locale="en-GB">
      <SplitButton menuLabel="More save options" actions={[{ label: 'Save as draft', onSelect: () => {} }, { label: 'Save as copy', onSelect: () => {} }]}>
        Save
      </SplitButton>
    </Provider>
  );
}

Secondary

variant="secondary" gives an outlined button; use it when this is not the area’s main action.

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

export default function Secondary() {
  return (
    <Provider locale="en-GB">
      <SplitButton variant="secondary" menuLabel="More save options" actions={[{ label: 'Save as draft', onSelect: () => {} }, { label: 'Save as copy', onSelect: () => {} }]}>
        Save
      </SplitButton>
    </Provider>
  );
}

Sizes

size uses the Button heights: 32, 36 or 40 px.

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

export default function Sizes() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-wrap items-center gap-md">
        <SplitButton size="sm" menuLabel="More save options" actions={[{ label: 'Save as draft', onSelect: () => {} }, { label: 'Save as copy', onSelect: () => {} }]}>
          Save
        </SplitButton>
        <SplitButton size="md" menuLabel="More save options" actions={[{ label: 'Save as draft', onSelect: () => {} }, { label: 'Save as copy', onSelect: () => {} }]}>
          Save
        </SplitButton>
        <SplitButton size="lg" menuLabel="More save options" actions={[{ label: 'Save as draft', onSelect: () => {} }, { label: 'Save as copy', onSelect: () => {} }]}>
          Save
        </SplitButton>
      </div>
    </Provider>
  );
}

Danger

tone="danger" marks a main action that deletes or cannot be undone.

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

export default function Danger() {
  return (
    <Provider locale="en-GB">
      <SplitButton tone="danger" menuLabel="More delete options" actions={[{ label: 'Archive', onSelect: () => {} }, { label: 'Delete all', onSelect: () => {} }]}>
        Delete
      </SplitButton>
    </Provider>
  );
}

Disabled

disabled turns off both parts together. A single menu item takes its own disabled field.

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

export default function Disabled() {
  return (
    <Provider locale="en-GB">
      <SplitButton disabled menuLabel="More save options" actions={[{ label: 'Save as draft', onSelect: () => {} }, { label: 'Save as copy', onSelect: () => {} }]}>
        Save
      </SplitButton>
    </Provider>
  );
}

Light and dark mode

Colours come from semantic tokens; neither mode needs extra settings.

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

export default function Default() {
  return (
    <Provider locale="en-GB">
      <SplitButton menuLabel="More save options" actions={[{ label: 'Save as draft', onSelect: () => {} }, { label: 'Save as copy', onSelect: () => {} }]}>
        Save
      </SplitButton>
    </Provider>
  );
}