Components · Button group · Use

Button group

Choose a configuration and copy the result.

Markup

<script lang="ts">
	import { ToggleGroup } from '@ark-ui/svelte';
</script>

<ToggleGroup.Root class="button-group-root" defaultValue={['week']} aria-label="Range">
	{#each ['Day', 'Week', 'Month'] as option (option)}
		<ToggleGroup.Item value={option.toLowerCase()} class="button-root button-tonal button-toggle">
			{option}
		</ToggleGroup.Item>
	{/each}
</ToggleGroup.Root>