Button Group

Segmented control that joins related buttons into a single connected bar.

Basic

.heex 
<.button_group>
  <.button>Year</.button>
  <.button>Month</.button>
  <.button>Week</.button>
</.button_group>

Variants

.heex 
<.button_group>
  <.button variant="solid">First</.button>
  <.button variant="solid">Second</.button>
  <.button variant="solid">Third</.button>
</.button_group>

<.button_group>
  <.button variant="soft">First</.button>
  <.button variant="soft">Second</.button>
  <.button variant="soft">Third</.button>
</.button_group>

<.button_group>
  <.button variant="surface">First</.button>
  <.button variant="surface">Second</.button>
  <.button variant="surface">Third</.button>
</.button_group>

<.button_group>
  <.button variant="outline">First</.button>
  <.button variant="outline">Second</.button>
  <.button variant="outline">Third</.button>
</.button_group>

<.button_group>
  <.button variant="dashed">First</.button>
  <.button variant="dashed">Second</.button>
  <.button variant="dashed">Third</.button>
</.button_group>

<.button_group>
  <.button variant="ghost">First</.button>
  <.button variant="ghost">Second</.button>
  <.button variant="ghost">Third</.button>
</.button_group>

Sizes

.heex 
<.button_group>
  <.button size="xs">Extra Small</.button>
  <.button size="xs">xs</.button>
</.button_group>

<.button_group>
  <.button size="sm">Small</.button>
  <.button size="sm">sm</.button>
</.button_group>

<.button_group>
  <.button size="md">Medium</.button>
  <.button size="md">md</.button>
</.button_group>

<.button_group>
  <.button size="lg">Large</.button>
  <.button size="lg">lg</.button>
</.button_group>

<.button_group>
  <.button size="xl">Extra Large</.button>
  <.button size="xl">xl</.button>
</.button_group>

Colors

.heex 
<.button_group>
  <.button variant="solid" color="primary">Save Draft</.button>
  <.button variant="solid" color="primary">Publish</.button>
  <.button variant="solid" color="primary">Schedule</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="info">Download</.button>
  <.button variant="solid" color="info">Export</.button>
  <.button variant="solid" color="info">Share</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="success">Approve</.button>
  <.button variant="solid" color="success">Accept</.button>
  <.button variant="solid" color="success">Complete</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="warning">Review</.button>
  <.button variant="solid" color="warning">Hold</.button>
  <.button variant="solid" color="warning">Postpone</.button>
</.button_group>

<.button_group>
  <.button variant="solid" color="danger">Delete</.button>
  <.button variant="solid" color="danger">Remove</.button>
  <.button variant="solid" color="danger">Archive</.button>
</.button_group>

With icons

.heex 
<.button_group>
  <.button>
    <.icon name="hero-document-duplicate" class="icon" /> Copy
  </.button>
  <.button>
    <.icon name="hero-pencil-square" class="icon" /> Edit
  </.button>
  <.button>
    <.icon name="hero-trash" class="icon" /> Delete
  </.button>
</.button_group>

Icon only

.heex 
<.button_group>
  <.button size="icon" aria-label="Copy">
    <.icon name="hero-document-duplicate" class="icon" />
  </.button>
  <.button size="icon" aria-label="Paste">
    <.icon name="hero-clipboard" class="icon" />
  </.button>
  <.button size="icon" aria-label="Cut">
    <.icon name="hero-scissors" class="icon" />
  </.button>
  <.button size="icon" aria-label="Edit">
    <.icon name="hero-pencil-square" class="icon" />
  </.button>
  <.button size="icon" aria-label="Delete">
    <.icon name="hero-trash" class="icon" />
  </.button>
</.button_group>

Labeled action with icon companion

Pair a labeled primary with an icon-only entry point for an alternate flow, like 'copy now' vs 'copy with options'.

.heex 
<.button_group>
  <.button variant="solid" color="info">
    <.icon name="hero-document-duplicate" class="icon" /> Copy
  </.button>
  <.button variant="solid" color="info" size="icon" aria-label="Copy with options">
    <.icon name="hero-cog-6-tooth" class="icon" />
  </.button>
</.button_group>

Segmented control

Mark the current selection with data-active and target it with data-active: utilities for a view-switcher pattern.

.heex 
<.button_group>
  <.button data-active class="data-active:highlight-strong data-active:font-medium">
    <.icon name="hero-squares-2x2" class="icon" /> Grid
  </.button>
  <.button>
    <.icon name="hero-list-bullet" class="icon" /> List
  </.button>
  <.button>
    <.icon name="hero-view-columns" class="icon" /> Kanban
  </.button>
</.button_group>

Pagination

.heex 
<.button_group>
  <.button size="sm" aria-label="Previous page">
    <.icon name="hero-chevron-left" class="icon" />
  </.button>
  <.button size="sm">1</.button>
  <.button size="sm" data-active class="data-active:highlight-strong data-active:font-medium">
    2
  </.button>
  <.button size="sm">3</.button>
  <.button size="sm">4</.button>
  <.button size="sm">5</.button>
  <.button size="sm" aria-label="Next page">
    <.icon name="hero-chevron-right" class="icon" />
  </.button>
</.button_group>

Split button

Combine a primary action with a dropdown trigger that exposes related variations of the same action.

.heex 
<.button_group>
  <.button variant="solid" color="primary">
    <.icon name="hero-arrow-down-tray" class="icon" /> Export
  </.button>
  <.dropdown placement="bottom-end">
    <:toggle class="size-9 justify-center rounded-base rounded-l-none bg-primary text-foreground-primary border border-[color-mix(in_oklab,var(--primary),black_12%)] shadow-base hover:bg-primary/90 [&>.icon]:size-4.5">
      <.icon name="hero-chevron-down" class="icon" />
      <span class="sr-only">More export options</span>
    </:toggle>
    <.dropdown_button>
      <.icon name="hero-document-text" class="icon" /> Export as PDF
    </.dropdown_button>
    <.dropdown_button>
      <.icon name="hero-document-text" class="icon" /> Export as CSV
    </.dropdown_button>
    <.dropdown_separator />
    <.dropdown_button>
      <.icon name="hero-share" class="icon" /> Share link
    </.dropdown_button>
  </.dropdown>
</.button_group>

Disabled in group

.heex 
<.button_group>
  <.button>Save</.button>
  <.button disabled>Edit</.button>
  <.button>Delete</.button>
</.button_group>