Components

SplitButton

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

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { SplitButton } from '@bigbang/ui';
Source: SplitButton.tsx
Storybook: SplitButton · Playground

SplitButton is in the @bigbang/ui package. The menu item type is exported as SplitButtonAction.

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

<SplitButton
  onClick={save}
  menuLabel="More save options"
  actions={[{ label: 'Save as draft', onSelect: saveDraft }]}
>
  Save
</SplitButton>;

Props

childrenRequired

Description: Label of the main action, a short verb phrase such as "Kaydet".
Type: string

onClick

Description: Runs the main action.
Type: MouseEventHandler<HTMLButtonElement>

actionsRequired

Description: Related actions in the menu, such as "Taslak olarak kaydet".
Type: readonly SplitButtonAction[]

menuLabelRequired

Description: Accessible name of the menu button, such as "Diğer kaydetme seçenekleri". Required: the button shows only a chevron.
Type: string

variant

Description: How important the action is. Use one primary per area.
Type: 'primary' | 'secondary'
Default: 'primary'

tone

Description: danger marks a main action that deletes or cannot be undone.
Type: 'neutral' | 'danger'
Default: 'neutral'

size

Description: Height of 32, 36 or 40 px, the Button heights.
Type: 'sm' | 'md' | 'lg'
Default: 'md'

disabled

Description: Turns off both parts.
Type: boolean
Default: false

type

Description: Form behaviour of the main action. Use 'submit' when it submits the form.
Type: 'button' | 'submit' | 'reset'
Default: 'button'

className

Description: For layout only: margins and placement.
Type: string

SplitButtonAction: label, onSelect, optional icon and disabled.

Data attributes

data-component="button-group": on the root.
data-part="main" and data-part="menu-trigger": on the two buttons.
data-popup-open: on the menu button while the menu is open (Base UI).
data-component="split-button-menu": on the menu.