Split Button

A primary action with related alternatives attached.

Default

<div className="inline-flex">
  <Button className="rounded-r-none">Publish</Button>
  <DropdownMenu>
    <DropdownMenuTrigger render={<Button size="icon" className="rounded-l-none border-l border-primary-foreground/20" />}>
  <ChevronDown />
  </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem>Publish</DropdownMenuItem>
      <DropdownMenuItem>Publish and share</DropdownMenuItem>
      <DropdownMenuItem>Schedule…</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</div>

Icon & titled items

<div className="inline-flex">
  <Button className="rounded-r-none"><Save /> Save</Button>
  <DropdownMenu>
    <DropdownMenuTrigger render={<Button size="icon" className="rounded-l-none" />}>
      <ChevronDown />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem><UploadCloud /> Publish</DropdownMenuItem>
      <DropdownMenuItem><Share2 /> Publish + share</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</div>

Left: a leading icon on the primary action. Right: menu items pairing a glyph with a Verb + Noun title (Publish, Publish + share, Publish + redeploy).

Markdown for agents: /design/split-button.md · spec: /design.md