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 ButtonGroup from '@lostgradient/cinder/button-group';
</script>

<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
Name Type Default Required Bindable Description
label unknown req
labelledBy unknown req
orientation 'horizontal' | 'vertical' 'horizontal' Orientation of the visual collapse. Default: 'horizontal'.
children snippet req Buttons (or split-button compositions) to render inside the group.