One default action, with the alternatives attached
The label fires the primary action directly; the chevron opens a menu of variants. One pill silhouette, two segments, so the common case stays one click away while the rest stays discoverable. variant sets the emphasis (primary or secondary) and tone the colour (default, neutral or destructive), and every combination comes in default and compact sizes; hover and press the segments to see their interactive states, and the loading rows keep full colour while blocking clicks.
Primary
Secondary
Primary, neutral
Secondary, neutral
Primary, destructive
Secondary, destructive
Primary, compact
Secondary, compact
Primary, neutral, compact
Secondary, neutral, compact
Primary, destructive, compact
Secondary, destructive, compact
// From the npm package
import { SplitButton } from 'rift-ds/components/SplitButton/SplitButton';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/split-button.json