Skip to content
omaris

Communication

Alert

Alert — MD3's banner, for a message that belongs to the page rather than floating over it.

import { Alert } from 'omaris'
Learn

Examples

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.

<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>

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>

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>

When to use it

Use it for

  • A message that belongs to the page and stays until the problem clears: a failed payment method, a maintenance window, an unverified email. tonal (the default) at the top of the content, under the Top App Bar.
  • A form-level error listing what to fix. tone="destructive" announces itself at once; variant="plain" is an inline one with no container.
  • A quieter note inside a form, like "Applies to every member". Use outlined or bar.
  • A message with a way out. actions holds one or two buttons ("Fix", "Learn more"); dismissible lets the person close it.

Not for

  • Confirming something just happened, like "Saved" or "Sent" → Toast.
  • A decision that must be made before continuing → Dialog. An alert never blocks.
  • A one-word status on an item, like "Overdue" → Badge.
  • A hint about one field → that field's supportingText on the Text Field.
  • A list with nothing in it → Empty.

Do

  • Keep one alert at the top of a page. Two stacked banners cancel each other out.
  • Lead with a title that says what is wrong and a description that says what to do. Drop the title for a one-line note.
  • Match tone to the meaning: destructive for broken, warning for about to break, info (the default) for worth knowing, success for a state. A success event is a toast.
  • Keep dismissible off while the problem is still there.

Don't

  • Fire one from an event handler. A message that answers a press is a Toast.
  • Put a third button in actions. It belongs on the page the first two point to.
  • Use size="lg" in a dashboard column. It is for a landing page or a full-width notice.
  • Swap the icon to decorate. The tone's own icon makes it readable without colour.
Pairs with Toast Dialog Button Empty Text Field

Quick reference

tone
  • primary
  • secondary
  • tertiary
  • destructive
  • success
  • warning
  • info (default)
variant
  • tonal (default)
  • outlined
  • bar
  • plain
size
  • sm
  • md (default)
  • lg

API

Alert

Alert — MD3's banner, for a message that belongs to the page rather than floating over it.

A default icon comes with each tone, so the common case is one line of markup; pass the icon snippet to override it, or icon={false}-style by setting showIcon={false} to drop it entirely.

role follows the tone: a destructive alert announces itself immediately, everything else waits its turn.

import { Alert } from 'omaris'

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root
No description in the source yet.
icon
No description in the source yet.
body
No description in the source yet.
title
No description in the source yet.
description
No description in the source yet.
actions
No description in the source yet.
close
No description in the source yet.

Props

tone

Defaults to 'info'

AlertTone
primary
secondary
tertiary
destructive
success
warning
info
variant

Defaults to 'tonal'

AlertVariant
tonal
Tinted block — the default banner.
outlined
Hairline frame, for a quieter note inside a form.
bar
A rule down the leading edge — the log-entry look.
plain
No container at all — an inline form error.
size

Defaults to 'md'

AlertSize
sm
md
lg
title
string

Heading line.

description
string

Body text. Use children for rich content.

showIcon

Defaults to true

boolean

Draw the tone's default icon.

dismissible

Defaults to false

boolean

Adds the trailing ×.

ondismiss
() => void
class
string
classes
AlertClasses

Per-part Tailwind overrides. class still covers the root.

icon
Snippet

Replaces the tone's default icon.

children
Snippet

Body content, in place of description.

actions
Snippet

Buttons under the body.