Skip to main content
Version: Next

Split Button

Live Editor
function SplitButtonDemo() {
  return (
    <ThemeProvider>
      <SplitButton
        label="Publish"
        menuLabel="More publishing actions"
        variant="primary"
        items={[
          { value: 'schedule', label: 'Schedule publish', shortcut: '⌘K' },
          { value: 'archive', label: 'Archive draft', tone: 'danger' }
        ]}
        onPrimaryAction={() => console.log('primary')}
        onSelect={(detail) => console.log(detail.value)}
      />
    </ThemeProvider>
  );
}
Result
Loading...

Key Props​

label, menuLabel, menuHeading, menuDescription, variant, density, menuDensity, menuShape, disabled, items, onPrimaryAction, onSelect