Alert

Call attention to a specific message or warning

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
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.

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

To hide the indicator entirely, pass indicator={false}.

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.

You can also provide onDismiss to render a dismiss button in the alert chrome.

Thank you!
Your application has been received. We will review your application and respond within the next 48 hours.

Reference

PropTypeDefaultDescription
titleReactNodeTitle displayed in the alert
descriptionReactNodeDescription text
actionsReactNodeActions (for example buttons)
actionsPlacement"end" | "bottom"Placement of actions
colorSemanticColors"primary"Color scheme
variant"solid" | "soft" | "outline""outline"Style variant
indicatorReactNode | falseCustom indicator or false to hide
onDismiss() => voidShows dismiss button when provided