ui · Primitive

SplitButton

@devalok/shilp-sutra/uiView in Storybook

variant

color

size

triggerSide=left

A compound button that combines a primary action with a dropdown trigger, rendered as a single visual unit [Action | ▼].

Import

import { SplitButton } from '@devalok/shilp-sutra'

<SplitButton onClick={handleSave} dropdownContent={<SaveOptions />}>
  Save
</SplitButton>

Prop	Type	Default	Description
children	ReactNode	—	Primary action content (left side)
onClick	(e) => void	—	Primary click handler
dropdownContent	ReactNode	—	Content rendered inside floating dropdown
variant	'solid' \| 'soft' \| 'outline'	'solid'	Visual style
color	'accent' \| 'error' \| 'success' \| 'warning' \| 'neutral'	'accent'	Color scheme
size	'xs' \| 'sm' \| 'md' \| 'icon-xs' \| 'icon-sm' \| 'icon-md'	'md'	Size
triggerSide	'left' \| 'right'	'right'	Which side the dropdown chevron sits on
triggerWidth	number \| string	auto	Custom width for the trigger half
placement	Placement	'top-end'	Floating UI placement for dropdown
disabled	boolean	false	Disable both halves
open	boolean	—	Controlled open state
onOpenChange	(open: boolean) => void	—	Open state callback
dropdownLabel	string	'More options'	aria-label for trigger
dropdownIcon	ReactNode	chevron-down	Custom trigger icon

Always provide dropdownLabel (aria-label on the chevron trigger) — defaults to "More options" but context-specific labels are better
triggerSide="left" flips the chevron to the left — rare, but useful for RTL layouts or when the primary action is the secondary emphasis

Fixed The dropdown is now keyboard-accessible. It previously used a hand-rolled floating panel (role="menu") with no focus management, arrow keys, or Escape — keyboard users couldn't reach or dismiss it. It now composes the DS Popover primitive: focus moves in on open, Escape and outside-click close, focus returns to the trigger, and on mobile it opens as a bottom sheet.