Alert
A message that stays in the page until the situation changes. Use it for things people need to know or fix where they are working.
Two-factor sign-in becomes required
From November 10, every workspace admin needs an authenticator app to sign in.
Installation
Set up Camaleo once (Installation), then import what you need. It renders on the server.
import { Alert, AlertTitle, AlertDescription } from "@camaleo/react";Anatomy
A box with an icon picked by the tone, an optional label and the content. Every part has a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Scheduled maintenance on Sunday
Sign-in will be unavailable from 2:00 to 2:15 AM UTC on November 2. Your data is not affected.
Version 2.4 is ready
It installs the next time you restart the app.
Payment received
We sent the receipt for $49.00 to billing@acme.com.
Storage 85% full
Uploads stop at 100 GB. Delete old files or upgrade your plan.
Bank account not connected
We couldn't verify account •••• 6021, so payouts are on hold.
Tones
Pick the tone by what people must do: nothing (info), nothing more (success), act soon (warning), act now to continue (danger).
This invoice was paid on October 24.
Prices change on January 1, 2027.
Title only
When one sentence says it all, skip the description. A short alert is read faster and gets in the way less.
Confirm your recovery email
Without it, a lost phone locks you out of your account.
With an action
If people can fix it, put the button inside the alert. They don't have to look for the right settings page.
Inside a form
Put the alert right above the field it is about, so people read the risk before they change the value.
Comments now support mentions
Type @ and a teammate's name to notify them.
Dismissible
Click Dismiss. Only notices people can live without should close. Focus moves to the button that replaces the alert, so keyboard users don't lose their place.
Your session ends in 60 seconds
Save your changes now or they will be lost.
Draft saved
Saved at 3:42 PM. We keep the last 30 versions.
Urgent or polite
warning and danger get role="alert" and interrupt the screen reader; info and success get role="status" and wait their turn.
Meeting summaries are on
A summary of each call lands in the channel 5 minutes after it ends.
Custom icon
Swap the icon when your product has a clearer one, like a sparkle for AI features. The tone still sets the color and the role.
In context
Alerts sit next to what they are about. These are whole pieces of UI you can copy, in the skin you picked.
Billing
Pro plan · $49.00 per month
Payment declined
Your Visa ending in 4242 was declined on October 24. Update it by October 31 to keep your projects online.
API status
DegradedSlower responses in Europe
Requests to eu-west-1 take up to 3 seconds while we replace a failed server.
Offline documents
3 documents didn't sync
You went offline while saving. Your edits are safe on this device.
Guidelines
You're using 8 of 10 seats
Add seats before inviting more people. You can keep working as usual.
Save danger for what really blocks them, so red keeps its meaning.
You're using 8 of 10 seats
Add seats before inviting more people.
When everything is red, people stop reading, and miss the real errors.
Domain not verified
Add the TXT record to your DNS so we can issue the certificate for acme.com.
Name the problem and give the next step, ideally as a button.
Domain error
Something went wrong with your domain.
"Something went wrong" leaves people stuck and sends them to support.
Props
warning and danger interrupt screen readers; info and success wait.AlertTitle and AlertDescription render a <p> and take its attributes, like className and style.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the alert itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- An alert added after the page loads is read out: right away for warning and danger (role="alert"), after the current speech for info and success (role="status").
- An alert already on the page when it loads is not announced. Put it near the top of the content it is about, so people find it while reading.
- When people close an alert, move focus to what takes its place, never to the top of the page.
- Color is never the only signal: each tone has its own icon, and the title says what happened.