EmptyState

Purpose

What a list shows when it has nothing to show: a heading that says what is missing, a sentence that says what to do, and the action that does it when there is one.

When to use, when not

Use it in place of an empty table or list, whether the user has nothing yet or a search found nothing. Not for an error (Alert), not for a loading state (BusyRegion).

Anatomy

1. An optional drawing, hidden.
2. The heading, at the level the page gives.
3. The text.
4. The action.

Props

Props of EmptyState

Name	Type	Default	What it does
title	string		What there is none of, as a sentence: "Aucun audit pour l'instant."
level?	2 | 3 | 4	2	The heading level, from the page's outline.
icon?	IconName		A drawing above the title, hidden.
class?	string	''	Layout classes only.
children?	Snippet		What to do about it, in a sentence or two.
action?	Snippet		The action, when there is one: a Button.

States

With an action, without, and with a drawing.

search

No action: the way out is to change the search, and the sentence says so.

Light

Aucun audit ne correspond à cette recherche.

Essayez un autre mot, ou retirez le filtre sur le statut.

Dark

Aucun audit ne correspond à cette recherche.

Essayez un autre mot, ou retirez le filtre sur le statut.

320 px, light

Aucun audit ne correspond à cette recherche.

Essayez un autre mot, ou retirez le filtre sur le statut.

320 px, dark

Aucun audit ne correspond à cette recherche.

Essayez un autre mot, ou retirez le filtre sur le statut.

216 px, light

Aucun audit ne correspond à cette recherche.

Essayez un autre mot, ou retirez le filtre sur le statut.

Forced colours, captured

withAction

A heading, a sentence that says what to do, and the action that does it.

Light

Aucun audit pour l'instant.

Un audit commence par une page : ajoutez la première et l'extension fera le reste.

Créer un audit

Dark

Aucun audit pour l'instant.

Un audit commence par une page : ajoutez la première et l'extension fera le reste.

Créer un audit

320 px, light

Aucun audit pour l'instant.

Un audit commence par une page : ajoutez la première et l'extension fera le reste.

Créer un audit

320 px, dark

Aucun audit pour l'instant.

Un audit commence par une page : ajoutez la première et l'extension fera le reste.

Créer un audit

216 px, light

Aucun audit pour l'instant.

Un audit commence par une page : ajoutez la première et l'extension fera le reste.

Créer un audit

Forced colours, captured

withIcon

Light

Aucune capture pour ce critère.

Les captures se prennent depuis l'extension, sur la page auditée.

Dark

Aucune capture pour ce critère.

Les captures se prennent depuis l'extension, sur la page auditée.

320 px, light

Aucune capture pour ce critère.

Les captures se prennent depuis l'extension, sur la page auditée.

320 px, dark

Aucune capture pour ce critère.

Les captures se prennent depuis l'extension, sur la page auditée.

216 px, light

Aucune capture pour ce critère.

Les captures se prennent depuis l'extension, sur la page auditée.

Forced colours, captured

Accessibility contract

• Role and name: a heading and text; the action is a Button.
• Keyboard, focus: the action’s.
• Live regions: none. A search result that changes in place is announced by the page’s LiveRegion, not by this block.

Content rules

French. The title starts with “Aucun” or “Aucune” and says what: “Aucun audit pour l’instant.”, “Aucune capture pour ce critère.” The text says what to do next, in one or two sentences.

Do and don’t

• Do give level the level the list’s own heading would have had.
• Do not show an empty state while the list is loading.

Examples

{#if audits.length === 0}
	<EmptyState title="Aucun audit pour l'instant." level={2}>
		<p>Ajoutez la première page et l'extension fera le reste.</p>
		{#snippet action()}<Button href="/lab/audits/new">Créer un audit</Button>{/snippet}
	</EmptyState>
{/if}

Surfaces

• App: the dashboard’s search, a site without audits, an organisation without sites, an audit without pages, an account without tokens.
• Extension: the audit list of the panel, when it is on Svelte.

Related

Button, DataTable.

Decisions

• 2026-09-24: a heading, not a paragraph, so the empty list is in the outline where the list would be.

Criteria held by construction

• 9.1, Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?
  The message is a heading at the level the page gives, so a reader jumping by headings finds the empty list where the list would be.
• 11.9, Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?
  The action, when there is one, is a Button with a verb; a link that says 'ici' has no place here.

Tokens it reads

• Colour: --rl-ink, --rl-ink-soft, --rl-line-strong
• Typography: --rl-weight-bold, --rl-text-lg
• Spacing: --rl-space-10, --rl-space-2, --rl-space-3, --rl-space-6
• Layout: --rl-radius, --rl-border

Seen in patterns

• Empty state