Skip to main content

Overview

Tip
You can invite up to 10 team members on the free plan.
Payment successful
Receipt sent to your email.
Storage almost full
You have used 90% of your storage limit.
Failed to save
There was an error saving your changes. Please try again.
Alert communicates important information to the user at the page or section level. It is non-dismissible by default and each variant automatically applies a matching icon, background, border, and text color.

Installation


Usage


Variants

Alert has 6 semantic variants covering the full range of feedback contexts.

Default

🔔
New update available
A new version of the app is ready to install.

Info

Tip
You can invite up to 10 team members on the free plan.

Success

Payment successful
Your invoice has been sent to [email protected]

Warning

Storage almost full
You have used 90% of your 5 GB storage limit.

Error

Failed to save
There was an error saving your changes. Please try again.

Destructive

Account will be deleted
This action cannot be undone. All data will be permanently removed.
Always pair a destructive Alert with a confirmation dialog before the user can trigger the action.

With Action

Your session is expiring
You will be logged out in 5 minutes.

API Reference

string
default:"default"
Semantic color variant. Values: default · info · success · warning · error · destructive
string
Bold heading text of the alert.
string
Supporting description text shown below the title.
ReactNode
Custom leading icon. When omitted, a default icon is used per variant.
ReactNode
Optional action element (e.g. a Button) placed at the end of the alert.
string
Additional Tailwind classes for custom overrides.

Accessibility

  • Alert uses role="alert" so screen readers announce it when it appears in the DOM
  • Do not place multiple Alerts on the same page simultaneously — use one at a time
  • Icon alone does not convey the meaning — always pair with title or description
  • Action links inside alerts should have descriptive text, not just “Click here”

Do’s & Don’ts

Do

  • Use the correct semantic variant for the type of feedback
  • Place Alerts at the top of the relevant form or section
  • Use action prop for clear next steps (e.g. “Retry”, “Contact support”)
  • Keep descriptions concise — one sentence is ideal

Don't

  • Don’t stack multiple Alerts at once — prioritize the most important one
  • Don’t use Alert for transient feedback — use Toast instead
  • Don’t use the destructive variant for regular errors
  • Don’t use Alerts as decorative banners with no actionable meaning