Button Group

A container that groups related buttons together with consistent styling.

"use client";

import * as React from "react";

import { Button } from "@smartacteam/ambient-web/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Menu } from "@smartacteam/ambient-web/menu";

export function ButtonGroupDemo() {
  const [label, setLabel] = React.useState("personal");

  return (
    <ButtonGroup.Root>
      <ButtonGroup.Root className="hidden sm:flex">
        <Button size="icon" aria-label="Go Back">
          <CentralIcon
            name="IconArrowLeft"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Button>
      </ButtonGroup.Root>
      <ButtonGroup.Root>
        <Button>Archive</Button>
        <Button>Report</Button>
      </ButtonGroup.Root>
      <ButtonGroup.Root>
        <Button>Snooze</Button>
        <Menu.Root>
          <Menu.Trigger
            render={
              <Button size="icon" aria-label="More Options">
                <CentralIcon
                  name="IconDotGrid1x3Horizontal"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
              </Button>
            }
          />
          <Menu.Content align="end" className="w-40">
            <Menu.Group>
              <Menu.Item>
                <CentralIcon
                  name="IconEmailNotification"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                Mark as Read
              </Menu.Item>
              <Menu.Item>
                <CentralIcon
                  name="IconArchive1"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                Archive
              </Menu.Item>
            </Menu.Group>
            <Menu.Separator />
            <Menu.Group>
              <Menu.Item>
                <CentralIcon
                  name="IconClock"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                Snooze
              </Menu.Item>
              <Menu.Item>
                <CentralIcon
                  name="IconCalendar1"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                Add to Calendar
              </Menu.Item>
              <Menu.Item>
                <CentralIcon
                  name="IconBulletList"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                Add to List
              </Menu.Item>
              <Menu.SubmenuRoot>
                <Menu.SubTrigger>
                  <CentralIcon
                    name="IconTag"
                    radius="2"
                    stroke="1.5"
                    fill="outlined"
                  />
                  Label As...
                </Menu.SubTrigger>
                <Menu.Content>
                  <Menu.RadioGroup value={label} onValueChange={setLabel}>
                    <Menu.RadioItem value="personal">Personal</Menu.RadioItem>
                    <Menu.RadioItem value="work">Work</Menu.RadioItem>
                    <Menu.RadioItem value="other">Other</Menu.RadioItem>
                  </Menu.RadioGroup>
                </Menu.Content>
              </Menu.SubmenuRoot>
            </Menu.Group>
            <Menu.Separator />
            <Menu.Group>
              <Menu.Item variant="destructive">
                <CentralIcon
                  name="IconTrashCan"
                  radius="2"
                  stroke="1.5"
                  fill="outlined"
                />
                Trash
              </Menu.Item>
            </Menu.Group>
          </Menu.Content>
        </Menu.Root>
      </ButtonGroup.Root>
    </ButtonGroup.Root>
  );
}

Usage

import { ButtonGroup } from "@smartacteam/ambient-web/button-group";

<ButtonGroup.Root>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup.Root>

Accessibility

The ButtonGroup component has the role attribute set to group.
Use tab to navigate between the buttons in the group.
Use aria-label or aria-labelledby to label the button group.

<ButtonGroup.Root aria-label="Button group">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup.Root>

ButtonGroup vs ToggleGroup

Use the ButtonGroup component when you want to group buttons that perform an action.
Use the ToggleGroup component when you want to group buttons that toggle a state.

Examples

Orientation

Set the orientation prop to change the button group layout.

import { Button } from "@smartacteam/ambient-web/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";
import { CentralIcon } from "@smartacteam/ambient-web/icon";

export function ButtonGroupOrientation() {
  return (
    <ButtonGroup.Root
      orientation="vertical"
      aria-label="Media controls"
      className="h-fit"
    >
      <Button size="icon">
        <CentralIcon
          name="IconPlusLarge"
          radius="2"
          stroke="1.5"
          fill="outlined"
        />
      </Button>
      <Button size="icon">
        <CentralIcon
          name="IconMinusLarge"
          radius="2"
          stroke="1.5"
          fill="outlined"
        />
      </Button>
    </ButtonGroup.Root>
  );
}

Size

Control the size of buttons using the size prop on individual buttons.

import { Button } from "@smartacteam/ambient-web/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";
import { CentralIcon } from "@smartacteam/ambient-web/icon";

export function ButtonGroupSize() {
  return (
    <div className="flex flex-col items-start gap-8">
      <ButtonGroup.Root>
        <Button size="sm">Small</Button>
        <Button size="sm">Button</Button>
        <Button size="sm">Group</Button>
        <Button size="icon-sm">
          <CentralIcon
            name="IconPlusLarge"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Button>
      </ButtonGroup.Root>
      <ButtonGroup.Root>
        <Button>Default</Button>
        <Button>Button</Button>
        <Button>Group</Button>
        <Button size="icon">
          <CentralIcon
            name="IconPlusLarge"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Button>
      </ButtonGroup.Root>
      <ButtonGroup.Root>
        <Button size="lg">Large</Button>
        <Button size="lg">Button</Button>
        <Button size="lg">Group</Button>
        <Button size="icon-lg">
          <CentralIcon
            name="IconPlusLarge"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Button>
      </ButtonGroup.Root>
    </div>
  );
}

Nested

Nest <ButtonGroup> components to create button groups with spacing.

import { Button } from "@smartacteam/ambient-web/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Input } from "@smartacteam/ambient-web/input";
import { InputGroup } from "@smartacteam/ambient-web/input-group";

export function ButtonGroupNested() {
  return (
    <ButtonGroup.Root>
      <ButtonGroup.Root>
        <Button size="icon">
          <CentralIcon
            name="IconPlusLarge"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Button>
      </ButtonGroup.Root>
      <ButtonGroup.Root>
        <InputGroup.Root>
          <InputGroup.Input
            render={<Input.Text placeholder="Send a message..." />}
          />
          <InputGroup.Addon align="inline-end">
            <CentralIcon
              name="IconMicrophone"
              radius="2"
              stroke="1.5"
              fill="outlined"
            />
          </InputGroup.Addon>
        </InputGroup.Root>
      </ButtonGroup.Root>
    </ButtonGroup.Root>
  );
}

Separator

The ButtonGroupSeparator component visually divides buttons within a group.

Buttons with variant default do not need a separator since they have a border. For variant primary, a separator is recommended to improve the visual hierarchy. Other button variants are not recommended for button groups.

import { Button } from "@smartacteam/ambient-web/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";

export function ButtonGroupSeparatorDemo() {
  return (
    <ButtonGroup.Root>
      <Button variant="primary" size="sm">
        Copy
      </Button>
      <ButtonGroup.Separator />
      <Button variant="primary" size="sm">
        Paste
      </Button>
    </ButtonGroup.Root>
  );
}

Split

Create a split button group by adding two buttons separated by a ButtonGroupSeparator.

import { Button } from "@smartacteam/ambient-web/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";
import { CentralIcon } from "@smartacteam/ambient-web/icon";

export function ButtonGroupSeparatorDemo() {
  return (
    <ButtonGroup.Root>
      <Button variant="primary" size="sm">
        Button
      </Button>
      <ButtonGroup.Separator />
      <Button variant="primary" size="icon-sm">
        <CentralIcon
          name="IconPlusLarge"
          radius="2"
          stroke="1.5"
          fill="outlined"
        />
      </Button>
    </ButtonGroup.Root>
  );
}

Input

Wrap an Input component with buttons.

import { Button } from "@smartacteam/ambient-web/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Input } from "@smartacteam/ambient-web/input";

export function ButtonGroupInputDemo() {
  return (
    <ButtonGroup.Root>
      <Input.Text placeholder="Search..." />
      <Button aria-label="Search" size="icon">
        <CentralIcon
          name="IconMagnifyingGlass2"
          radius="2"
          stroke="1.5"
          fill="outlined"
        />
      </Button>
    </ButtonGroup.Root>
  );
}

Create a split button group with a Menu component.

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Menu } from "@smartacteam/ambient-web/menu";

export function ButtonGroupDropdownDemo() {
  return (
    <ButtonGroup.Root>
      <Button>Follow</Button>
      <Menu.Root>
        <Menu.Trigger
          render={
            <Button size="icon">
              <CentralIcon
                name="IconChevronBottom"
                radius="2"
                stroke="1.5"
                fill="outlined"
              />
            </Button>
          }
        />
        <Menu.Content align="end" className="w-56">
          <Menu.Group>
            <Menu.Item>
              <CentralIcon
                name="IconVolumeOff"
                radius="2"
                stroke="1.5"
                fill="outlined"
              />
              Mute Conversation
            </Menu.Item>
            <Menu.Item>
              <CentralIcon
                name="IconCheckmark1"
                radius="2"
                stroke="1.5"
                fill="outlined"
              />
              Mark as Read
            </Menu.Item>
            <Menu.Item>
              <CentralIcon
                name="IconBubbleAlert"
                radius="2"
                stroke="1.5"
                fill="outlined"
              />
              Report Conversation
            </Menu.Item>
            <Menu.Item>
              <CentralIcon
                name="IconPeopleRemove"
                radius="2"
                stroke="1.5"
                fill="outlined"
              />
              Block User
            </Menu.Item>
            <Menu.Item>
              <CentralIcon
                name="IconShareOs"
                radius="2"
                stroke="1.5"
                fill="outlined"
              />
              Share Conversation
            </Menu.Item>
            <Menu.Item>
              <CentralIcon
                name="IconFiles"
                radius="2"
                stroke="1.5"
                fill="outlined"
              />
              Copy Conversation
            </Menu.Item>
          </Menu.Group>
          <Menu.Separator />
          <Menu.Group>
            <Menu.Item variant="destructive">
              <CentralIcon
                name="IconTrashCanSimple"
                radius="2"
                stroke="1.5"
                fill="outlined"
              />
              Delete Conversation
            </Menu.Item>
          </Menu.Group>
        </Menu.Content>
      </Menu.Root>
    </ButtonGroup.Root>
  );
}

Select

Pair with a Select component.

"use client";

import * as React from "react";

import { Button } from "@smartacteam/ambient-web/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Input } from "@smartacteam/ambient-web/input";
import { Select } from "@smartacteam/ambient-web/select";

const CURRENCIES = [
  { label: "US Dollar", value: "$" },
  { label: "Euro", value: "€" },
  { label: "British Pound", value: "£" },
];

export function ButtonGroupSelectDemo() {
  const [currency, setCurrency] = React.useState("$");

  return (
    <ButtonGroup.Root>
      <ButtonGroup.Root>
        <Select.Root
          items={CURRENCIES}
          value={currency}
          onValueChange={(value) => setCurrency(value as string)}
        >
          <Select.Trigger className="font-mono">{currency}</Select.Trigger>
          <Select.Content alignItemWithTrigger={false} align="start">
            <Select.Group>
              {CURRENCIES.map((item) => (
                <Select.Item key={item.value} value={item.value}>
                  {item.value}{" "}
                  <span className="text-muted-foreground">{item.label}</span>
                </Select.Item>
              ))}
            </Select.Group>
          </Select.Content>
        </Select.Root>
        <Input.Numeric decimalScale={2} placeholder="10.00" />
      </ButtonGroup.Root>
      <ButtonGroup.Root>
        <Button aria-label="Send" size="icon">
          <CentralIcon
            name="IconArrowRight"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Button>
      </ButtonGroup.Root>
    </ButtonGroup.Root>
  );
}

Use with a Popover component.

"use client";

import { Button } from "@smartacteam/ambient-web/button/button";
import { ButtonGroup } from "@smartacteam/ambient-web/button-group";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Label } from "@smartacteam/ambient-web/label";
import { Popover } from "@smartacteam/ambient-web/popover";
import { Textarea } from "@smartacteam/ambient-web/textarea";

export function ButtonGroupPopoverDemo() {
  return (
    <ButtonGroup.Root>
      <Button>
        <CentralIcon name="IconRobot" radius="2" stroke="1.5" fill="outlined" />
        Copilot
      </Button>
      <Popover.Root>
        <Popover.Trigger
          render={
            <Button size="icon" aria-label="Open Popover">
              <CentralIcon
                name="IconChevronBottom"
                radius="2"
                stroke="1.5"
                fill="outlined"
              />
            </Button>
          }
        />
        <Popover.Content align="end" className="rounded-xl text-sm">
          <div className="flex w-full flex-col gap-2">
            <Label htmlFor="task" className="sr-only">
              Task Description
            </Label>
            <Textarea
              id="task"
              placeholder="I need to..."
              className="resize-none"
            />
            <p className="text-sm font-normal tracking-tight text-foreground-secondary">
              Copilot will open a pull request for review.
            </p>
          </div>
        </Popover.Content>
      </Popover.Root>
    </ButtonGroup.Root>
  );
}