Empty | Lime design system

Examples

First use

Add a card or link a bank to see your spending here.

No search results

Try a shorter word, or clear the filters.

Nothing due

No bills due this week.

When to use it

Use: A list, grid or feed with no items yet, where an action makes the first.
Use: A search or filter that returned nothing.
Use: A tab or panel whose content has not been created.
Not for: Content is still loading. Show its shape. Use Skeleton.
Not for: Something failed to load. Say what failed and offer a retry. Use Error state.
Not for: One missing field. Use the field hint or placeholder.

9 rules

Must: Make the action that fills the region the primary button; any second action is ghost. Because two lime buttons leave the person unsure which one fills the list.
Must: Say no matches and offer to clear when a filter emptied the list; never the first-use message. Because "No transactions yet" on a filtered list tells the person their money is gone.
Should: Name what is missing in the title, sentence case, such as No transactions yet.
Should: Say how the region gets filled in one sentence with the real step; do not restate the title.
Never: Add an illustration, mascot or emoji; keep the 24px icon in its well. Because an emoji brings its own platform colors and size into a well sized for a 24px icon.
Must: Show one or two buttons in EmptyActions, never more. Because a third button wraps to a second line at 390px and buries the one next step.
Must: Render Empty only after the load returns no items; show a skeleton while loading. Because an empty list during the fetch flashes "No transactions yet" at someone who has many.
Should: Place EmptyTitle (a fixed h3) under an h2 so no heading level is skipped.
Should: Put Empty straight in the region it empties; never wrap it in a card or give it a fill to frame it.

3 checks

6 edge cases

Long title: Wraps and stays centered; an unbroken string overflows.
Narrow to 120px: Buttons wrap onto separate lines; side padding stays 24px.
Right to left: Content is centered and nothing mirrors; action order follows the direction.
No children: A 40px padded gap that says nothing; always pass a title.
Failed load: Not an empty list; show an error with a retry instead.
Forced colors: Nothing to drop: the region has no fill or border, and the icon well loses its fill.

5 props

6 tokens