feedback
Empty state
What people see, and can do, when a list or a page has nothing in it yet.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A title that says what is empty, a sentence on why it matters and one clear action.
No lessons planned this week
Plan a lesson and Sam gets the time on their phone right away.
<section class="ca-empty-state w-full max-w-md" aria-labelledby="no-lessons-title">
<span class="ca-empty-state__media" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="17" rx="2" /><path d="M3 9h18M8 2v4M16 2v4" /></svg>
</span>
<h3 class="ca-empty-state__title" id="no-lessons-title">No lessons planned this week</h3>
<p class="ca-empty-state__description">Plan a lesson and Sam gets the time on their phone right away.</p>
<div class="ca-empty-state__actions">
<button class="ca-button ca-button--primary ca-button--md" type="button">Plan a lesson</button>
</div>
</section>Examples
No search results
Repeat the search term and offer ways forward instead of a bare "No results".
No students match “Jansn”
Check the spelling, or search by email address or phone number instead.
<section class="ca-empty-state w-full max-w-md" aria-labelledby="no-results-title">
<h3 class="ca-empty-state__title" id="no-results-title">No students match “Jansn”</h3>
<p class="ca-empty-state__description">Check the spelling, or search by email address or phone number instead.</p>
<div class="ca-empty-state__actions">
<button class="ca-button ca-button--outline ca-button--md" type="button">Clear the search</button>
<button class="ca-button ca-button--ghost ca-button--md" type="button">Add a student</button>
</div>
</section>Guidance and accessibility
When to use
- Use an empty state where a list, table or page has no content yet, or a search or filter finds nothing.
- Offer one clear next action, such as “Plan a lesson”. Never leave people at “No results”.
- For an error, use an alert; an empty state is for a valid situation.
Accessibility
- The title is a heading at the level that fits the page outline, and the section is labelled by it.
- Media is decoration: hide it with
aria-hidden="true", or give it a text alternative if it adds meaning. - When the empty state appears after a search, announce the result count,
for example in a
role="status"element.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-empty-state | Component | Centered column for the message and its action. |
ca-empty-state__media | Part | An optional icon or illustration above the title. |
ca-empty-state__title | Part | What is empty, as a heading. |
ca-empty-state__description | Part | Why it is empty or what happens next. |
ca-empty-state__actions | Part | The way forward; usually one button. |
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.
No lessons planned this week
Plan a lesson and Sam gets the time on their phone right away.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
No lessons planned this week
Plan a lesson and Sam gets the time on their phone right away.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
No lessons planned this week
Plan a lesson and Sam gets the time on their phone right away.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
No lessons planned this week
Plan a lesson and Sam gets the time on their phone right away.
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>