Feedback
Alert
An inline banner for a single important message, with a color, icon, and optional actions.
<UiAlert />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.
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";