Badge
Badge — a status pill, or the count that rides on an icon.
Try it
New
Knobs
tone variant size <script> import { Badge } from 'omaris';</script><Badge>New</Badge>Walkthrough
1. Status and counts
A status pill on a row, or a count on its own. max caps it — 100 becomes 99+, because past that the number stops mattering.
Live Building Failed 7 99+ 128
<script lang="ts"> import { Badge } from 'omaris';</script><Badge tone="success" variant="tonal">Live</Badge><Badge tone="warning" variant="tonal">Building</Badge><Badge tone="destructive" variant="tonal">Failed</Badge><Badge value={7} /><Badge value={128} /><Badge value={128} max={999} />2. Anchored
anchor pins it to the corner of a relative parent — unread on a bell; dot drops the number when "something is new" is all that matters.
Something new
<script lang="ts"> import { Badge, IconButton } from 'omaris';</script>{#snippet bell()} ...{/snippet}<span class="relative inline-flex"> <IconButton aria-label="Notifications">{@render bell()}</IconButton> <Badge anchor="top-end" value={4} tone="destructive" label="4 unread" /></span><span class="relative inline-flex"> <IconButton aria-label="Notifications">{@render bell()}</IconButton> <Badge anchor="top-end" dot tone="success" label="Something new" /></span>