Alert
Alert — MD3's banner, for a message that belongs to the page rather than floating over it.
Try it
Saved
Your changes are live.
Knobs
tone variant size <script> import { Alert } from 'omaris';</script><Alert title="Saved" description="Your changes are live." />Walkthrough
1. Tones
An alert belongs to the page, unlike a toast, which floats over it.
Scheduled maintenance
Sunday 2–3 AM UTC.
Deploy finished
storefront is live.
Card expiring
Update it before 1 April.
Build failed
3 tests are red on main.
<script lang="ts"> import { Alert } from 'omaris';</script><div class="flex w-full flex-col gap-3"> <Alert tone="info" title="Scheduled maintenance" description="Sunday 2–3 AM UTC." /> <Alert tone="success" title="Deploy finished" description="storefront is live." /> <Alert tone="warning" title="Card expiring" description="Update it before 1 April." /> <Alert tone="destructive" title="Build failed" description="3 tests are red on main." /></div>2. Variants
outlined for a note inside a form, bar for the log-entry look, plain for an inline error with no container at all.
tonal
Filled — the default.
outlined
A border and nothing else.
bar
A rule down the leading edge.
plain
No container at all.
<script lang="ts"> import { Alert } from 'omaris';</script><div class="flex w-full flex-col gap-3"> <Alert variant="tonal" tone="info" title="tonal" description="Filled — the default." /> <Alert variant="outlined" tone="info" title="outlined" description="A border and nothing else." /> <Alert variant="bar" tone="info" title="bar" description="A rule down the leading edge." /> <Alert variant="plain" tone="info" title="plain" description="No container at all." /></div>3. Actions and dismiss
actions gives the banner a way out — Fix, Learn more. dismissible only when closing it is fine because the condition is not.
Two invoices are overdue
They were due on 1 March.
<script lang="ts"> import { Alert, Button } from 'omaris'; let shown = $state(true);</script><div class="flex w-full flex-col gap-3"> {#if shown} <Alert tone="warning" title="Two invoices are overdue" description="They were due on 1 March." dismissible ondismiss={() => (shown = false)} > {#snippet actions()} <Button size="xs" variant="text">Remind me later</Button> <Button size="xs" tone="warning">Review</Button> {/snippet} </Alert> {:else} <Button variant="outlined" size="xs" onclick={() => (shown = true)}>Bring it back</Button> {/if}</div>