Alert
Inline message for notices and warnings with semantic colors, variants, a title, a description, action slots, and a dismiss control.
import { Alert } from "@plexui/vue/components/Alert";Examples
Overview
Colors & variants
variant
Title
Description
Actions
Action placement
Indicator
Dismissible
Banner
API
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | slot | — | Title displayed in the alert |
description | string | slot | — | Description text |
actions | slot | — | Actions (for example buttons) |
actions-placement | "end" | "bottom" | — | Placement of actions; automatic from sizing when unset |
actions-class-name | string | — | Class applied to the actions container |
color | SemanticColors | "primary" | Color scheme |
variant | "solid" | "soft" | "outline" | "outline" | Style variant |
indicator | slot | false | — | Custom indicator (slot), or :indicator="false" to hide it |
@dismiss | () => void | — | Shows the dismiss button when set |
banner | boolean | false | Full-width strip: square corners, lines above and below only |
Styling
Alert reads these component tokens. Override them at any scope to restyle it:
--alert-border-radius: border radius (defaultvar(--radius-xl))--alert-font-size: font size (defaultvar(--font-text-sm-size))--alert-gap: gap (defaultspacing(3))--alert-gutter: gutter (defaultspacing(4))--alert-line-height: line height (defaultvar(--font-text-sm-line-height))--alert-title-font-weight: title font weight (defaultvar(--font-weight-semibold))