feedback
Alert
A message about the page or the task at hand, such as a warning or a confirmation.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
An alert needs the component class and one variant. A title alone is enough for a short message.
Your trial ends on 30 November
Add a payment method to keep your projects after that date.
<div class="ca-alert ca-alert--info w-full max-w-lg" role="status">
<p class="ca-alert__title">Your trial ends on 30 November</p>
<p class="ca-alert__description">Add a payment method to keep your projects after that date.</p>
</div>Examples
Variants
Pick the variant by meaning. The title says what happened, so the message does not rely on color.
Changes are saved as you type
Maintenance on Sunday from 02:00 to 04:00
Invoice sent to the customer
Two lessons have no instructor yet
Payment failed: the card was declined
<div class="grid w-full max-w-lg gap-3">
<div class="ca-alert ca-alert--neutral">
<p class="ca-alert__title">Changes are saved as you type</p>
</div>
<div class="ca-alert ca-alert--info">
<p class="ca-alert__title">Maintenance on Sunday from 02:00 to 04:00</p>
</div>
<div class="ca-alert ca-alert--success">
<p class="ca-alert__title">Invoice sent to the customer</p>
</div>
<div class="ca-alert ca-alert--warning">
<p class="ca-alert__title">Two lessons have no instructor yet</p>
</div>
<div class="ca-alert ca-alert--danger">
<p class="ca-alert__title">Payment failed: the card was declined</p>
</div>
</div>With actions
Put buttons in ca-alert__actions, the main action first. This one interrupts, so it uses role="alert".
Your session ends in 2 minutes
Unsaved changes are lost when it ends.
<div class="ca-alert ca-alert--warning w-full max-w-lg" role="alert">
<p class="ca-alert__title">Your session ends in 2 minutes</p>
<p class="ca-alert__description">Unsaved changes are lost when it ends.</p>
<div class="ca-alert__actions">
<button class="ca-button ca-button--primary ca-button--sm" type="button">Stay signed in</button>
<button class="ca-button ca-button--ghost ca-button--sm" type="button">Sign out now</button>
</div>
</div>Guidance and accessibility
When to use
- Use an alert for a message about the page or the current task. For the status of one item, such as an invoice, use a badge.
- Write the title as the message itself: “Payment failed: the card was declined”, not “Error”.
- Say what to do next in the description or with an action.
Accessibility
- An alert that appears while people work needs a live region:
role="status"for routine news,role="alert"only when it interrupts, such as a session that is about to end. An alert that is in the page when it loads needs neither. - The live region must be in the page before its text changes. Add the text to an existing element instead of inserting the whole alert.
- The title carries the meaning; the color only supports it.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-alert | Component | Box for the message, with the tone's fill and edge. |
ca-alert__title | Part | The message in one line. |
ca-alert__description | Part | More detail, such as what to do next. |
ca-alert__actions | Part | Row of buttons that wraps on narrow screens. |
ca-alert--neutral | Variant | General information without urgency. |
ca-alert--info | Variant | Something people should know, such as planned maintenance. |
ca-alert--success | Variant | A task finished. |
ca-alert--warning | Variant | Something needs attention soon. |
ca-alert--danger | Variant | Something failed or needs action now. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Your trial ends on 30 November
Add a payment method to keep your projects after that date.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Your trial ends on 30 November
Add a payment method to keep your projects after that date.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Your trial ends on 30 November
Add a payment method to keep your projects after that date.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Your trial ends on 30 November
Add a payment method to keep your projects after that date.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>