FAB
MD3 floating action button. Three sizes (40 / 56 / 96dp), plus extended for the pill that carries a label next to the icon.
Try it
Knobs
tone variant size <script> import { Fab } from 'omaris';</script><Fab aria-label="Compose"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"> <path d="M12 5v14M5 12h14" stroke-linecap="round" /> </svg></Fab>Walkthrough
1. Sizes
56dp is the screen's one action; 40dp fits inside a dense surface like a card, 96dp a screen that is nothing but that action.
<script lang="ts"> import { Fab } from 'omaris';</script>{#snippet plus()} ...{/snippet}<Fab size="sm" aria-label="New invoice">{@render plus()}</Fab><Fab size="md" aria-label="New invoice">{@render plus()}</Fab><Fab size="lg" aria-label="New invoice">{@render plus()}</Fab>2. Extended
extended adds the label, for an action a plus alone would not explain — "New invoice" rather than +.
<script lang="ts"> import { Fab } from 'omaris';</script>{#snippet plus()} ...{/snippet}<Fab extended> {@render plus()} {#snippet label()}New invoice{/snippet}</Fab><Fab extended variant="filled" tone="tertiary"> {@render plus()} {#snippet label()}Compose{/snippet}</Fab><Fab extended variant="surface" size="sm"> {@render plus()} {#snippet label()}Add row{/snippet}</Fab>