Actions

ButtonGroup

Visual and semantic grouping of related buttons that share a single accessible label and present as one connected control.

import { ButtonGroup } from '@lostgradient/cinder/button-group';
actiongrouping
01

Overview

Clusters related action buttons into a unified visual group with shared borders.

Usage

svelte 
<script lang="ts">
  import Button from '@lostgradient/cinder/button';
  import ButtonGroup from '@lostgradient/cinder/button-group';
</script>

<ButtonGroup label="Document actions">
  <Button variant="secondary">Save</Button>
  <Button variant="secondary">Duplicate</Button>
  <Button variant="secondary">Archive</Button>
</ButtonGroup>
Live preview
02

When to use

Use when
  • Clustering related actions such as align-left/center/right that read as a single toolset.
  • Visually joining multiple buttons into a single segmented bar without implying selection.
Avoid when
  • Selecting exactly one option from a fixed set — use segmented-control instead.
  • Rendering a single button — use button on its own.
03

Examples

Basic button group

Horizontal layout container with border-collapsed buttons. Use consistent variants across children.

Right-to-left (RTL)

Logical properties automatically flip collapsed borders and outer corner rounding when the writing direction is RTL.

Split button composition

A primary action button paired with a dropdown for related secondary actions. This is composition — ButtonGroup does no split-button work itself.

Vertical button group

Vertically stacked buttons with collapsed borders.

04

Props

Props for button-group
NameTypeDefaultDescription
label required text Inline accessible name for the group, applied as aria-label. Provide exactly one of label or ariaLabelledby.
ariaLabelledby text The id of a visible heading element that already names the group, applied as aria-labelledby. Provide exactly one of label or ariaLabelledby.
orientation 'horizontal' | 'vertical' 'horizontal' Orientation of the visual collapse. Default: 'horizontal'.
children required snippet Buttons (or split-button compositions) to render inside the group.