Alert
An inline message banner with an optional severity glyph, a title, actions, and a dismissible form; color and meaning on independent axes.
Live demo
Alert presents a persistent, inline message. Two axes drive it independently.
severity (success, warn, danger, info) carries the meaning: the leading status glyph and the live-region politeness. tone carries the color, drawn from the full palette (semantic roles, accent variants, or named hues). By default a severity paints itself its standard color (danger reads red), but a tone overrides that, so a danger can be repainted pink and still announce as danger, while a color-only notice (a pink awareness banner with no severity) shows no glyph and announces politely. A soft variant tints the banner; a solid variant fills it for higher emphasis. An optional title sits above the message, an actions footer holds buttons, and a dismissible form adds a close button (also closable with Escape) that emits a dismiss event before removing the banner.
When to use
How this component composes with the rest of the set.
actions slot for primary/secondary responses; match the button tone to the alert tone. severity; project your own into the icon slot to override it. A color-only notice that carries no severity shows no icon at all. Props
5 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
severity color (info when neither is set). Set it to recolor a severity (a pink danger) or to tint a color-only notice (a pink awareness banner). | ||||
danger/warn announce assertively). Omit for a color-only notice with no glyph. A bare status-named tone (e.g. danger) implies the matching severity. | ||||
dismiss event before removing the banner. | ||||
dismiss-label on the custom element). |
Events
What the component emits, and what rides along on event.detail. The name in the
first column is the one addEventListener takes.
| Event | Detail | Bindings | Description |
|---|---|---|---|
Appearance
Variants
soft
A soft tone-tinted background with tone-colored text, border, and icon.
solid
Filled with the tone color and reverse ink; the high-emphasis treatment.
Sizes
md
The single size.
States
dismiss-hover
Pointer over the close button. Overlay paints the hover tint.
dismiss-active
Close button pressed. Overlay paints the press tint.
dismiss-focus-visible
Keyboard focus on the close button: a token-colored ring plus a transparent outline that the forced-colors base rule promotes.
Anatomy
The named parts that make up the component. A ::part() handle is reachable from your own stylesheet; the class beside it is the component's internal selector, which a shadow boundary keeps to itself.
alert
The banner root carrying the variant and tone classes plus the live-region role.
icon
The leading status glyph, shown when a severity is set, drawn in the banner color and hidden from assistive tech. Project an icon slot to override it when a severity is present; a color-only banner shows no icon.
body
The vertical stack holding the title, message, and actions.
title
The optional bold heading above the message.
message
The default-slot body copy.
actions
The footer row of buttons rendered below the message.
dismiss
The close button shown in the dismissible form, with its own hover/press overlay and focus ring.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent--accent-2--accent-2-bg--accent-2-fg--accent-2-text--accent-3--accent-3-bg--accent-3-fg--accent-3-text--accent-4--accent-4-bg--accent-4-fg--accent-4-text--accent-bg--accent-fg--accent-text--black--black-bg--black-fg--black-text--blue--blue-bg--blue-fg--blue-text--border-normal--border-thick--border-thin--brown--brown-bg--brown-fg--brown-text--cyan--cyan-bg--cyan-fg--cyan-text--danger--danger-bg--danger-fg--danger-text--duration-fast--ease-standard--fg-0--font-sans--gray--gray-bg--gray-fg--gray-text--green--green-bg--green-fg--green-text--info--info-bg--info-fg--info-text--leading-normal--leading-tight--neutral--neutral-bg--neutral-fg--neutral-text--orange--orange-bg--orange-fg--orange-text--pink--pink-bg--pink-fg--pink-text--purple--purple-bg--purple-fg--purple-text--radius-md--radius-sm--red--red-bg--red-fg--red-text--ring--space-0--space-1--space-2--space-3--space-4--state-hover--state-press--success--success-bg--success-fg--success-text--text-body--text-lg--warn--warn-bg--warn-fg--warn-text--weight-semibold--white--white-bg--white-fg--white-text--yellow--yellow-bg--yellow-fg--yellow-textSlots
The message body.
An optional bold heading above the message.
A footer row of buttons rendered below the message.
Overrides the built-in severity glyph; fill it to show your own icon when a severity is set.
Accessibility
severity, not color: danger/warn render role="alert" with aria-live="assertive", success/info render role="status" with aria-live="polite", and a severity-less notice is polite role="status". aria-hidden) and appears only with a severity; meaning is carried by the text and the role, never by color alone. dismissLabel, default "Dismiss"). dismiss event; calling preventDefault() keeps the banner in place so a host can run its own removal animation. Code
Tones, variants, and dismissal
The four status tones across the soft and solid variants, with an optional title, an actions footer, and the dismissible form.
<xtyle-alert tone="info" variant="soft">
<span slot="title">Heads up</span>
Your changes are saved locally and will sync when you reconnect.
</xtyle-alert>
<xtyle-alert tone="success" variant="soft">Profile updated.</xtyle-alert>
<xtyle-alert tone="danger" variant="solid" dismissible>
<span slot="title">Upload failed</span>
The file exceeded the 25 MB limit.
<span slot="actions">
<xtyle-button variant="outline" tone="danger">Try again</xtyle-button>
</span>
</xtyle-alert><script lang="ts">
import { Alert, Button } from "@xtyle/svelte";
</script>
<Alert tone="info">
{#snippet title()}Heads up{/snippet}
Your changes are saved locally and will sync when you reconnect.
</Alert>
<Alert tone="success">Profile updated.</Alert>
<Alert tone="danger" variant="solid" dismissible ondismiss={() => retry()}>
{#snippet title()}Upload failed{/snippet}
The file exceeded the 25 MB limit.
{#snippet actions()}
<Button variant="outline" tone="danger">Try again</Button>
{/snippet}
</Alert>---
import { Alert, Button } from "@xtyle/astro";
---
<Alert tone="info">
<Fragment slot="title">Heads up</Fragment>
Your changes are saved locally and will sync when you reconnect.
</Alert>
<Alert tone="success">Profile updated.</Alert>
<Alert tone="danger" variant="solid" dismissible>
<Fragment slot="title">Upload failed</Fragment>
The file exceeded the 25 MB limit.
<Button slot="actions" variant="outline" tone="danger">Try again</Button>
</Alert>