Button Group
kumo-svelte

Button Group

Joins a primary action and a related trigger into a single split button.

<script lang="ts">
  import CaretDown from 'phosphor-svelte/lib/CaretDown';
  import { Button } from 'kumo-svelte/components/button';
  import { ButtonGroup } from 'kumo-svelte/components/button-group';
</script>

<ButtonGroup aria-label="Deploy">
  <Button variant="primary">Deploy</Button>
  <Button variant="primary" shape="square" aria-label="More deploy options" icon={CaretDown} />
</ButtonGroup>

When to use

ButtonGroup joins a small set of tightly coupled buttons into one control, most commonly a split button. Children retain their own variant, size, and shape. Use Toolbar for multiple independent controls that need toolbar keyboard semantics.

Installation

import { ButtonGroup } from 'kumo-svelte';

API Reference

PropTypeDefaultDescription
aria-label string-Accessible name describing the grouped action.