<baht-split-button>

Main action plus a ▾ menu of related actions. Each action can carry a keyboard shortcut: the main one shows in the main button’s tooltip, item ones as a right-aligned hint in the menu, and all of them are bound page-wide (same rules as <baht-button shortcut>).

With shortcuts

disabled

Hover Save for its tooltip; open the menu for the item hints. ⌥S / Alt+S saves, ⇧⌥S / Alt+Shift+S picks the first item — try them.

HTMLReactAngular

Copy

<baht-split-button style="display:block;min-height:150px" label="Save" shortcut="alt+s" align="start"></baht-split-button>

<script>
  const el = document.querySelector('baht-split-button');
  el.items = [
    {
      "value": "save-close",
      "label": "Save and close",
      "shortcut": "shift+alt+s"
    },
    {
      "value": "save-draft",
      "label": "Save as draft"
    },
    {
      "value": "archive",
      "label": "Archive",
      "disabled": true
    }
  ];
</script>

const el = document.querySelector('baht-split-button');
el.items = [
  { value: 'save-close', label: 'Save and close', shortcut: 'shift+alt+s' },
  { value: 'save-draft', label: 'Save as draft' },
];
el.addEventListener('baht-click', () => save());
el.addEventListener('baht-select', (e) => run(e.detail.value));

Keyboard

Where	Key	Does
▾ toggle	↓ · Enter · Space	open, focus the first item
▾ toggle	↑	open, focus the last item
menu	↑ ↓	move (wraps, skips disabled)
menu	Home · End	first · last item
menu	Enter · Space	pick
menu	Escape	close, focus back on ▾ (a surrounding modal stays open)
menu	Tab	close, move on
anywhere	the item’s shortcut	pick it, menu open or not

Props

Name	Type	Default	Description
label	string	''	Main action label
variant	ButtonVariant	'primary'	primary | secondary | danger
size	ButtonSize	'md'	sm | md | lg
disabled	boolean	false	Disable both halves and every shortcut
shortcut	string	''	Main action shortcut, e.g. alt+s
itemsJS	MenuItem[]	[]	Menu entries { value, label, shortcut?, disabled? } (property)
align	'start' | 'end'	'end'	Menu edge aligned with the button (end | start)
menu-label	string	''	Accessible name of the ▾ toggle

Events

Event	detail	Description
baht-click	—	Main action activated (click or its shortcut)
baht-select	{ value, item }	A menu item was picked (click, keyboard or its shortcut)
name	CustomEvent