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/ui/components/Alert";Examples
Overview
Scheduled maintenance
We'll be offline 2 - 4 AM UTC on July 14 while we upgrade our database.
Colors & variants
variant
primary
Scheduled maintenance on Saturday, 2-4 AM PT
Track status updates on status page
success
Scheduled maintenance on Saturday, 2-4 AM PT
Track status updates on status page
danger
Scheduled maintenance on Saturday, 2-4 AM PT
Track status updates on status page
warning
Scheduled maintenance on Saturday, 2-4 AM PT
Track status updates on status page
caution
Scheduled maintenance on Saturday, 2-4 AM PT
Track status updates on status page
info
Scheduled maintenance on Saturday, 2-4 AM PT
Track status updates on status page
discovery
Scheduled maintenance on Saturday, 2-4 AM PT
Track status updates on status page
Title
Your current access level limits what you can view or modify
Description
We're working on centralizing SCIM and invite settings. For now, setup is handled within individual product settings. Learn more
Actions
Password expires in 3 days
Update it now to avoid losing access to your account.
Your API key will be rotated soon
Automatic key rotation is scheduled for March 10. Download the new key afterward to keep your integrations running.
Action placement
Our terms of service has been updated
We've updated our terms to clarify how we handle data, billing, and user permissions. Please review and accept the latest terms to avoid impacting your service.
Indicator
We're working on centralizing SCIM and invite settings. For now, setup is handled within individual product settings. Learn more
Version 2.18.5 rolls out behind-the-scenes tweaks to caching and background sync. You don't need to do anything.
Dismissible
Try our new dashboard layout
We've introduced a streamlined layout that makes using the dashboard even easier. You can switch back any time.
Thank you!
Your application has been received. We will review your application and respond within the next 48 hours.
Banner
You are offline. Changes will sync when the connection is back.
A new version is available.
API
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Title displayed in the alert |
description | ReactNode | — | Description text |
actions | ReactNode | — | Actions (for example buttons) |
actionsPlacement | "end" | "bottom" | — | Placement of actions; automatic from sizing when unset |
actionsClassName | string | — | Class applied to the actions container |
color | SemanticColors | "primary" | Color scheme |
variant | "solid" | "soft" | "outline" | "outline" | Style variant |
indicator | ReactNode | false | — | Custom indicator or false to hide |
onDismiss | () => void | — | Shows the dismiss button when set |
banner | boolean | false | Full-width strip: square corners, lines above and below only |
className | string | — | Class applied to the alert container |
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))