Toast
One toast card.
Walkthrough
1. Kinds
toast() is a plain call from anywhere — no component, no context hook. OmarisProvider renders the stack these land in.
<script lang="ts"> import { Button, toast } from 'omaris';</script><Button variant="tonal" onclick={() => toast('Copied to clipboard')}>Plain</Button><Button variant="tonal" tone="success" onclick={() => toast.success('Invoice sent')}>Success</Button><Button variant="tonal" tone="destructive" onclick={() => toast.error('Upload failed')}> Error</Button><Button variant="tonal" tone="warning" onclick={() => toast.warning('Card expires soon')}> Warning</Button>2. With an action
A toast can carry one action. Undo is what it is usually for.
Nothing deleted.
<script lang="ts"> import { Button, toast } from 'omaris'; let deleted = $state(false);</script><Button variant="outlined" onclick={() => { deleted = true; toast('Message moved to trash', { action: { label: 'Undo', onclick: () => (deleted = false) } }); }}> Delete a message</Button><p class="text-body-sm text-muted-foreground"> {deleted ? 'Deleted — press Undo in the toast.' : 'Nothing deleted.'}</p>3. Following a promise
toast.promise shows a loading toast that becomes the success or the error one, so the three states are one call rather than three.
<script lang="ts"> import { Button, toast } from 'omaris'; const save = (ok: boolean) => new Promise<string>((resolve, reject) => setTimeout(() => (ok ? resolve('storefront') : reject(new Error('timeout'))), 1500) );</script><Button variant="tonal" onclick={() => toast.promise(save(true), { loading: 'Deploying…', success: (name) => `${name} is live`, error: 'Deploy failed' })}> Deploy</Button><Button variant="tonal" tone="destructive" onclick={() => toast.promise(save(false), { loading: 'Deploying…', success: 'Live', error: 'Deploy failed' })}> Deploy, badly</Button>