Empty Message
Empty state for telling users there's nothing to show, with error, warning, no-results, and onboarding compositions.
import {
EmptyMessage,
EmptyMessageActionRow,
EmptyMessageDescription,
EmptyMessageIcon,
EmptyMessageTitle,
} from "@plexui/vue/components/EmptyMessage";Examples
Composition
fill
color
size
icon
content
Error message
Warning message
No results
Compact
Left aligned
API
EmptyMessage (root)
| Prop | Type | Default | Description |
|---|---|---|---|
fill | "static" | "absolute" | "none" | "static" | How the container fills its parent: "static" takes full width and height, "absolute" covers a positioned parent (inset 0), "none" applies no sizing |
size | "sm" | "md" | "md" | sm is the compact message for a panel, a card section or an empty list |
align | "center" | "start" | "center" | start left-aligns the message, for an empty state under a section heading |
EmptyMessageIcon
| Prop | Type | Default | Description |
|---|---|---|---|
color | "secondary" | "danger" | "warning" | "secondary" | Semantic color |
size | "sm" | "md" | "md" | Icon badge size |
EmptyMessageTitle
| Prop | Type | Default | Description |
|---|---|---|---|
color | "secondary" | "danger" | "warning" | "secondary" | Semantic color |
EmptyMessageDescription: description text; no specific props.
EmptyMessageActionRow
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Additional classes for the action row container |
Every part accepts class. The parts apply no other attributes.
Styling
Empty Message has no component tokens of its own. It reads the shared semantic color, typography and spacing tokens listed in Design tokens, so it follows theme changes made there.