Segmented Button
MD3 segmented button.
Walkthrough
1. Basic
One choice out of a few, all visible at once. Items are data, not children.
<script lang="ts"> import { SegmentedButton } from 'omaris'; let range = $state('week');</script><SegmentedButton label="Range" bind:value={range} items={[ { value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' } ]}/>2. Multiple
multiple for a few that can all apply — Bold, Italic; it binds values and lets the set be empty.
<script lang="ts"> import { SegmentedButton } from 'omaris'; let styles = $state<string[]>(['bold']);</script><SegmentedButton multiple mandatory={false} label="Text style" bind:values={styles} items={[ { value: 'bold', label: 'Bold' }, { value: 'italic', label: 'Italic' }, { value: 'underline', label: 'Underline' } ]}/>3. Icons
A selected segment swaps its icon for the tick, unless keepIcon — which is what an icon-only set needs, or it loses its meaning when picked.
<script lang="ts"> import { SegmentedButton } from 'omaris'; let view = $state('grid'); let align = $state('start');</script>{#snippet grid()} ...{/snippet}{#snippet list()} ...{/snippet}<div class="flex w-full flex-col items-center gap-4"> <SegmentedButton label="View" bind:value={view} items={[ { value: 'grid', label: 'Grid', icon: grid }, { value: 'list', label: 'List', icon: list } ]} /> <SegmentedButton label="Alignment" keepIcon bind:value={align} items={[ { value: 'start', icon: list, ariaLabel: 'Align start' }, { value: 'center', icon: grid, ariaLabel: 'Align centre' } ]} /></div>