Alert

Payment received

We've sent the receipt to your email.

New version

Version 2.0 brings dark mode and a new editor.

Your trial ends soon

Upgrade within 3 days to keep your projects.

Couldn't save

Check your connection and try again.

---
import { Alert } from 'bws-astro-ui';
---

<Alert type="success" title="Payment received" text="We've sent the receipt to your email." />
<Alert type="error" title="Couldn't save" text="Check your connection and try again." />

type sets the color and the icon. Without it — and without a color — the alert is neutral.

Variants

variant="tonal" (default)

variant="flat"

variant="elevated"

variant="outlined"

variant="text"

Neutral — no type or color.

On the tinted variants (tonal, outlined, text) the text is the alert’s color mixed with a quarter of the theme’s text color, so it meets WCAG AA contrast even for light brand colors — in both themes.

Border and prominent

border="start"

border="top", outlined

border="start", flat

Prominent

A larger icon for alerts that need more attention.

border adds a thick accent on one edge: start, end (these follow the text direction), top or bottom.

Actions and closing

The append slot holds actions; closable adds a × that removes the alert.

Upload failed

The file is larger than 10 MB.

Closable

Click × to dismiss this alert.

<Alert type="error" title="Upload failed">
  The file is larger than 10 MB.
  <Button slot="append" size="sm" variant="flat" color="error">Try again</Button>
</Alert>

<Alert id="cookies" type="info" closable text="We use cookies." />

<script>
  // Fired on the alert before it's removed; preventDefault() keeps it.
  document.getElementById('cookies')?.addEventListener('alert:close', () => {
    localStorage.setItem('cookies-dismissed', '1');
  });
</script>

Custom color and icon

Custom color and icon.

No icon (icon={false}).

Accessibility

Warnings and errors get role="alert", so screen readers announce them right away; other alerts get role="status", announced politely. Pass your own role to change it.

API

Prop	Type	Default
`type`	`success` · `info` · `warning` · `error`	—
`title`	`string`	—
`text`	`string`	—
`variant`	`tonal` · `flat` · `elevated` · `outlined` · `text`	`tonal`
`color`	overrides the type’s color	from `type`, else neutral
`icon`	icon component, or `false` to hide it	from `type`
`border`	`start` · `end` · `top` · `bottom`	—
`prominent`	`boolean` — a larger icon	`false`
`rounded`	`xs` · `sm` · `default` · `lg` · `xl` · `full`	`default`
`closable`	`boolean` — a × that removes the alert	`false`
`closeLabel`	`string` — accessible name of the ×	`Close`

Slot	Content
`title`	replaces `title`
default	the body — replaces `text`
`prepend`	replaces the icon
`append`	actions, e.g. a button

Event	When
`alert:close`	on the alert, before a closable alert is removed — cancelable, bubbles

Created by