Actions

Button group

Attached button clusters: split buttons, segmented controls and stacked avatar groups, composed from Button and Avatar.

Source: Composition pattern (Button + Avatar)
Figma: Button groups section · split (primary, outline), segmented, avatar group.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { Button } from "@/components/ui/button";import { Avatar } from "@/components/ui/avatar";

Split button: a main action plus a menu of related actions.
Segmented control: switching between a few mutually exclusive views, like Day, Week and Month.
Avatar group: showing who is on a project or document without listing names.

For more than four or five options, use Tabs or a Select instead of a segmented control.

Mutually exclusive options. Try it: the active option is marked with aria-pressed.

Overlapping avatars with an overflow counter.

No dedicated component: square the inner corners of adjacent Buttons and remove the shared border.

Prop	Type	Default	Description
rounded-r-none / rounded-l-none	className	-	Square the edges where buttons meet.
border-l-0	className	-	Avoid a double border between outline buttons.
-ml-2 ring-2 ring-card	className	-	Overlap avatars and separate them with a ring in the surface color.

Give the menu half of a split button an aria-label such as "More actions".
For a segmented control that switches views, mark the active option with aria-pressed="true".
In an avatar group, give the overflow counter a label such as "9 more people" for screen readers.