ExperimentalatomFeedback

Illustration

Bridge's drawings for empty states: small scenes of cards, faces and one blue button.

import { … } from "@brdgapp/ui/components/illustration"

Usage

Illustration is one of Bridge's thirteen drawings for empty states: a tiny scene made of Bridge's own cards, faces and lines, with one blue button or mark, on a patch of the dot grid. Usually you pass its name to DataState's empty state. Every color is a token, so it follows dark mode by itself. The usual mistake is using a drawing to decorate a card that already has content.

When to use

An empty state: a list, table, feed or page with nothing in it yet, through DataState's illustration.
A search or filter that found nothing (search, filters), or a cleared queue (done).
A whole page that failed to load (error).

When not to use

While loading. Show a skeleton shaped like the content. Use Skeleton instead.
On a card, row or page that has content.
For a failed card or row: DataState's error, with Try again. Use DataState instead.
To show someone's network. Use NetworkGraph instead.
For a feature card or onboarding picture. Use Scene instead.

The look comes from props

A component's appearance comes only from its own options (variant, size, color). className on a package component is for layout (mt-4, shrink-0, w-full), never for font size, color, padding, radius or hover. If the look needs a className, the component or the chosen option is wrong: fix that instead.

Anatomy

Dot grid. A rounded patch of the page's dot grid behind the scene.
Scene. Cards, faces and lines for text, in tokens. One subject.
Blue mark. The one blue thing: a button, a slot, a tick.

Examples

Through DataState

Pass the drawing's name as `illustration`. DataState sets the size and the spacing.

No lists yet

Group people you're tracking, like founders to meet this quarter.

A search with no results

Small inside a panel, with a title that names the search.

No one matches “Saltmarsh”

Check the spelling, or search by company.

All thirteen

Which one goes with which empty state is on the Illustration foundation page.

people

intros

companies

messages

activity

meetings

lists

jobs

connect

filters

done

error

States

States not written yet.

Behavior

Three widths at 5:4: sm 80px, md 120px (default), lg 160px.
Doesn't move. Lines stay 1px at every size.

Do and don't

Pick the drawing for what's missing: intros for no intros.

Don't

Pick by mood, or use one drawing for everything.

Use sm inside a card or side panel.

Don't

Put a 120px drawing in a small card, pushing the title out of sight.

Content

The title under it says what would be here: “No intros yet”, not “Nothing here”.
One line on how to get some, then one action.

Accessibility

Hidden from screen readers by default: the title beside it says it.
title makes it an image with that name. Use it only when the picture says something the words don't.

API reference