Feedback
Alert
An inline banner for a single important message, with a color, icon, and optional actions.
<UiAlert />Options
One block per prop — what it does, and what it looks like set.
Title
title is the line in bold at the top — the thing that happened, stated once. Pair it with description when the reader needs to know what to do about it.
Your changes have been saved.
Description
description is the body text under the title — or the whole alert on its own, when there's nothing worth putting in bold above it.
Description only, no title.
Icon
icon is optional: the alert reads fine without one, but a glyph makes the colour's meaning legible before anybody reads the words.
Without icon
Alerts work fine without an icon too.
With icon
The same alert, with the meaning carried twice.
Color
color is the color theme of the Alert.
neutral
This is an alert description explaining the current state.
primary
This is an alert description explaining the current state.
secondary
This is an alert description explaining the current state.
success
This is an alert description explaining the current state.
error
This is an alert description explaining the current state.
warning
This is an alert description explaining the current state.
info
This is an alert description explaining the current state.
pending
This is an alert description explaining the current state.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
Default slot
Replaces description when the body needs markup — a link, an inline code span, a list.
Slot content
Custom rich content passed via the default slot.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"'neutral'Slots
defaultTypes
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";