Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    SplitButton

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

    Storybook
    Storybook
    Source
    Source

    When to use

    Section titled “When to use”

    Use SplitButton when a frequent main action has a few variants of the same task: “Save” and “Save as draft”, “Export” and its formats. The main action runs in one click; the variants wait in the menu.

    When not to use

    Section titled “When not to use”
    • For unrelated actions: Do not collect different actions in one menu; use separate Buttons or a toolbar.
    • When there is no main action: If all options are equal, use a button that only opens a menu.
    • When there is only one variant: Two separate Buttons are clearer.

    Anatomy

    Section titled “Anatomy”
    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>
      );
    }
    1. Main button: Runs the main action; its label is visible.
    2. Menu button: Shows only a chevron; its name comes from menuLabel.
    3. Menu: The list of related actions; opens below, aligned to the end.

    Behaviour

    Section titled “Behaviour”
    • Clicking the main button runs only the main action; the menu does not open.
    • The menu button opens with a click, Enter, Space or Down arrow. Focus moves to the first item.
    • Choosing an item closes the menu and returns focus to the menu button. Escape or a click outside also closes it.
    • While the menu is open the menu button keeps its hovered fill and the chevron stays still; the menu grows and fades in from the button and closes faster. With reduced motion only the opacity changes.
    • disabled turns off both parts together.

    Guidelines

    Section titled “Guidelines”
    • Make the main action the most frequent option.
    • Keep two to five items in the menu.
    • Menu items should be variants of the main action.
    • Use one primary button per area.

    Content

    Section titled “Content”
    • The main label is a short verb. Menu items start with a verb.
    • menuLabel says what the menu holds: “More save options”.
    Turkish English
    Kaydet Save
    Taslak olarak kaydet Save as draft
    Kopya olarak kaydet Save as copy
    Diğer kaydetme seçenekleri More save options
    Section titled “Related components”