Components

ButtonGroup

Related actions joined into one control, with shared borders and one set of props for every button.

Usage

Put Buttons in a ButtonGroup. They touch, share their borders, keep the group's rounding on the outer corners only, and take its variant, size, density and color, outlined by default. A prop on a Button still wins.

Pick an action.

Export.svelte

<script>
  import { Button, ButtonGroup } from 'sveltier';
</script>

<ButtonGroup aria-label="Export">
  <Button onclick={exportCsv}>CSV</Button>
  <Button onclick={exportPdf}>PDF</Button>
</ButtonGroup>

Accessibility

The group has role="group": name it with aria-label so its buttons are heard as a set.
Each button stays its own stop in the tab order. For one choice among options, use a SegmentedControl, which is a radio group with one tab stop.

API

Name	Type	Default	Description
`variant`	`'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'`	`'outlined'`	The variant of the Buttons.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	The size of the Buttons.
`density`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	The density of the Buttons.
`color`	`Color`	`'primary'`	The colour of the Buttons.
`rounded`	`boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`true`	The rounding of the group's outer corners; inner corners are square.
`children`	`Snippet`	`–`	The Buttons.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLDivElement \| null`	`–`	The root element, bindable with `bind:ref`.