Icon Button
MD3 icon button. Same tone system as Button, but its own geometry: height comes from size, width from width as a ratio of that height (MD3's narrow / default / wide, which are ~0.8× / 1× / 1.3×).
Try it
Knobs
tone variant size width shape <script> import { IconButton } from 'omaris';</script><IconButton aria-label="Add"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"> <path d="M12 5v14M5 12h14" stroke-linecap="round" /> </svg></IconButton>Walkthrough
1. Variants
standard has no fill until touched, right for a toolbar; filled marks the one that matters. aria-label is required.
<script lang="ts"> import { IconButton } from 'omaris';</script>{#snippet star()} ...{/snippet}<IconButton variant="standard" aria-label="standard">{@render star()}</IconButton><IconButton variant="filled" aria-label="filled">{@render star()}</IconButton><IconButton variant="tonal" aria-label="tonal">{@render star()}</IconButton><IconButton variant="elevated" aria-label="elevated">{@render star()}</IconButton><IconButton variant="outlined" aria-label="outlined">{@render star()}</IconButton>2. Size and width
Height from size, width from width — narrow, default, wide. xs for a dense table row, sm where a thumb lands, wide to anchor a row.
<script lang="ts"> import { IconButton } from 'omaris';</script>{#snippet plus()} ...{/snippet}<IconButton size="xs" variant="tonal" aria-label="Add">{@render plus()}</IconButton><IconButton size="sm" variant="tonal" aria-label="Add">{@render plus()}</IconButton><IconButton size="md" variant="tonal" aria-label="Add">{@render plus()}</IconButton><IconButton width="narrow" variant="outlined" aria-label="Add, narrow">{@render plus()}</IconButton><IconButton width="default" variant="outlined" aria-label="Add, default" >{@render plus()}</IconButton><IconButton width="wide" variant="outlined" aria-label="Add, wide">{@render plus()}</IconButton><IconButton shape="square" variant="filled" aria-label="Add">{@render plus()}</IconButton>3. Toggle
A toggle is an action that stays on — favourite, mute. selectedIcon swaps the glyph, so an outline star fills in.
<script lang="ts"> import { IconButton } from 'omaris'; let starred = $state(false);</script><IconButton toggle bind:pressed={starred} variant="tonal" aria-label={starred ? 'Remove star' : 'Add star'}> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"> <path d="m12 4 2.4 5 5.6.8-4 3.9 1 5.5-5-2.7-5 2.7 1-5.5-4-3.9 5.6-.8z" stroke-linejoin="round" /> </svg> {#snippet selectedIcon()} ... {/snippet}</IconButton>