Empty state

Empty state options
Choice	Values	Default	What it does
`scopesmbk-empty-state--scope-<value>`	`inlinecenteredpage`	`inline`	Inline sits at the start of a list or a panel it stands in for. Centered fills a larger area, centred, with a larger title. Page is the whole page, as a missing page or a page that failed to load.
`tonesmbk-empty-state--tone-<value>`	`defaultwarningdanger`	`default`	Warning and danger color the icon for a state that needs care or an error. The words carry the meaning; the color only backs them up.
`sizesmbk-empty-state--size-<value>`	`mdsm`	`md`	Small is for one panel among many, as on a dashboard: the title in a label style, a smaller icon and smaller gaps, so an empty panel reads no louder than its neighbors.

Partssmbk-empty-state__iconsmbk-empty-state__textsmbk-empty-state__titlesmbk-empty-state__descriptionsmbk-empty-state__contextsmbk-empty-state__actionssmbk-empty-state__referencesmbk-empty-state__hidden

Named for its cause, with the step that fixes it: “Clear filters” for no results, never a generic “Try again”.

No notes match these filters

Try fewer filters, or clear them all to see every note.

Learn more

Inline lines up with the list it stands in for; centered fills a larger area.

No messages yet

Messages from your team land here.

No messages yet

Messages from your team land here.

Warning and danger color the icon; the words say what happened, so the color is never the only sign.

No results for “invoces”

Check the spelling, or search for fewer words.

You are offline

Changes stay on this device and are sent when you are back online.

This list could not load

Something on our side failed. Your work is saved.

Contact support

Reference: 7F2-K9Q

Before anything exists, say what will be here and offer the first step.

Start your first project

A project holds its pages, its people and its deadlines in one place.

See an example

Say who can help, and how to ask.

You can’t see this report

Reports are shared by their owner. Ask Ana Silva for access.

The whole page, with a search field holding what was asked for. On its own page the title is the one main heading, level 1.

This page isn’t here

It may have moved, or the address may be wrong. Search for it, or start again from the home page.

Go to the home page

Purpose

Fills an area when what belongs there is missing or failed to load: a list with nothing in it yet, a search with no results, a report the reader may not see, a page that is not there. It names the cause and offers the next best step, so the reader is never left facing a blank space or a bare "Something went wrong".

When to use

In place of a list, a table or a panel that has nothing to show: on first use, or after everything was cleared.
In place of results, when a search or a filter matches nothing.
Small, in one panel of a dashboard or a side panel that has nothing to show, among panels that do.
When the content cannot be shown: no permission, offline, not found, an error on the server, or only part of it loaded.
As a whole page, for a missing page or a page that failed to load.

When not to use

While the content is still loading. Show skeletons; show the empty state only once the answer has come.
For a mistake in a form. Use the field message and the error summary.
For a message about the whole page that sits above its content. Use an alert or a banner.

Usage rules

Do

Name the cause: "No notes match these filters", not "Nothing here".
Offer the step that fixes it: "Clear filters" for no results, "Ask for access" for no permission.
Offer "Try again" and a reference only when the cause is an error on the server.
Use the small size inside a panel or a card among others, with small buttons and links, and set the heading level under the panel's own title.

Don't

Show it before the content has had its chance to load.
Use "Something went wrong" when the cause is known.
Put a long explanation or the error's details in it.
Use the medium size in one panel of a dashboard: its heading outweighs the panel's own title and the page's.

No notes match these filters

Try fewer filters.

Name the cause and offer the step that fixes it.

Something went wrong

Don't

A vague message with a generic retry leaves the reader stuck when the cause is known.

Anatomy

The block, which draws no surface: it fills whatever holds it.
The icon part, an optional icon in the tone's icon color. Warning and danger have their own; an empty state in the default tone shows one only when given, chosen for its cause.
The text part: the title part, a heading that says what is missing or what went wrong, over the optional description part, a line that says why and what would bring the content.
The context part, optional free content: a search field holding the query, a short list of links.
The actions part: the next best step, usually a brand button, then an optional second, quieter step, usually a link.
The reference part, an optional reference in a code style, for the reader to quote to support after an error on the server.
The hidden part, the status a screen reader reads the words from, when the page asks for it.

Behavior

Inline lines everything up at the start, close to its edges, for the list or panel it stands in for. Centered places it in the middle of a larger area with more room round it, a larger icon, title and line. Page does the same for a whole page. Centered and page keep their words to a readable width and centre themselves in the space they are given; inline fills it. The words wrap.

Two sizes. Medium, the default, titles it in a heading style. Small is for one panel among many, as on a dashboard: the title in a label style straight over its line, a smaller icon and smaller gaps, so an empty panel reads no louder than the panels beside it or its own heading. Small keeps the scope's alignment: inline at the start, centered in the middle with less room round it.

With announce, a screen reader reads the title and the line as they appear, and again when they change, without moving focus: for an empty result after a search or a filter.

What it does for you

It takes no focus. Its actions are ordinary buttons and links, after its words in the Tab order.
The title is a heading of the level the page needs: 2 by default, 1 for a whole page.
The icon is decorative, and the tone colors only the icon. The words and the icon's shape carry the meaning, never the color alone.
With announce, a screen reader reads the title and the line as they appear, and again when they change, without moving focus.

What you must do

Show it in place of what it stands for, so a screen reader meets the words, not an empty table with its column headings.
Set the heading level with headingLevel when the page needs another.
Put any meaning the icon carries in the words.
Name the cause in words. A reference or an error code alone is never enough, and never show the error's details.
Set announce for an empty result after a search or a filter.

How to test

With a screen reader, the title is found as a heading of the right level, followed by its line.
Tab through it: it takes no focus itself, and the actions come after its words.
Trigger an empty result with announce set: the words are read as they appear, and focus does not move.
With text at 200% and the page 320 pixels wide, the words wrap and stay whole.
In a forced-color mode, the icon and the actions are still visible.

The files the empty state is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

empty-state.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192

/* smbk-empty-state — Empty state. Figma "Empty state" 7117:731 (Scope × Tone; Icon, Description and Reference
 * booleans). A block of words that stands in for missing or failed content: an icon in the tone's icon colour, the
 * title over a line saying what to do, the actions (a brand button, then a link), and an optional reference in Code
 * SM. Inline lines it all up at the start, tight to its edges; Centered and Page centre it, with more room round it,
 * a larger title and line, and the larger icon. It draws no surface: it fills whatever holds it. */

.smbk-empty-state {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--smbk-space-stack-xl);
  padding: var(--smbk-space-inset-md);
  border-radius: var(--smbk-radius-container-md);
}

.smbk-empty-state__icon {
  flex: none;
  color: var(--smbk-color-icon-subtle);
  font-size: var(--smbk-size-icon-lg);
}

.smbk-empty-state__text {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-text-caption);
  align-self: stretch;
}

.smbk-empty-state__title {
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-heading-sm-font-family);
  font-size: var(--smbk-typography-heading-sm-font-size);
  font-weight: var(--smbk-typography-heading-sm-font-weight);
  line-height: var(--smbk-typography-heading-sm-line-height);
  letter-spacing: var(--smbk-typography-heading-sm-letter-spacing);
  text-transform: var(--smbk-typography-heading-sm-text-transform);
  text-wrap: pretty;
}

.smbk-empty-state__description {
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
  text-wrap: pretty;
}

.smbk-empty-state__context {
  align-self: stretch;
}

.smbk-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--smbk-space-inline-lg);
}

.smbk-empty-state__reference {
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-code-sm-font-family);
  font-size: var(--smbk-typography-code-sm-font-size);
  font-weight: var(--smbk-typography-code-sm-font-weight);
  line-height: var(--smbk-typography-code-sm-line-height);
  letter-spacing: var(--smbk-typography-code-sm-letter-spacing);
}

/* The status a screen reader reads the words from, when the page asks for it; the words show above. */
/* .smbk-empty-state__hidden: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */

/* ---- tone: the icon's colour; the words carry the meaning. The default tone is the block's own look. ---- */

.smbk-empty-state--tone-warning .smbk-empty-state__icon {
  color: var(--smbk-color-feedback-warning-icon);
}

.smbk-empty-state--tone-danger .smbk-empty-state__icon {
  color: var(--smbk-color-feedback-danger-icon);
}

/* ---- centered and page: centred in the space, with room round it and a measure for the words ---- */

.smbk-empty-state--scope-centered,
.smbk-empty-state--scope-page {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.smbk-empty-state--scope-centered .smbk-empty-state__actions,
.smbk-empty-state--scope-page .smbk-empty-state__actions {
  justify-content: center;
}

.smbk-empty-state--scope-centered .smbk-empty-state__icon,
.smbk-empty-state--scope-page .smbk-empty-state__icon {
  font-size: var(--smbk-size-icon-2xl);
}

.smbk-empty-state--scope-centered {
  max-width: var(--smbk-size-width-640);
  padding: var(--smbk-space-inset-3xl);
}

.smbk-empty-state--scope-centered .smbk-empty-state__title {
  font-family: var(--smbk-typography-heading-md-font-family);
  font-size: var(--smbk-typography-heading-md-font-size);
  font-weight: var(--smbk-typography-heading-md-font-weight);
  line-height: var(--smbk-typography-heading-md-line-height);
  letter-spacing: var(--smbk-typography-heading-md-letter-spacing);
  text-transform: var(--smbk-typography-heading-md-text-transform);
}

.smbk-empty-state--scope-centered .smbk-empty-state__description {
  font-family: var(--smbk-typography-body-md-font-family);
  font-size: var(--smbk-typography-body-md-font-size);
  font-weight: var(--smbk-typography-body-md-font-weight);
  line-height: var(--smbk-typography-body-md-line-height);
  letter-spacing: var(--smbk-typography-body-md-letter-spacing);
}

.smbk-empty-state--scope-page {
  max-width: var(--smbk-size-content-md);
  padding: var(--smbk-space-section-md);
}

.smbk-empty-state--scope-page .smbk-empty-state__title {
  font-family: var(--smbk-typography-heading-lg-font-family);
  font-size: var(--smbk-typography-heading-lg-font-size);
  font-weight: var(--smbk-typography-heading-lg-font-weight);
  line-height: var(--smbk-typography-heading-lg-line-height);
  letter-spacing: var(--smbk-typography-heading-lg-letter-spacing);
  text-transform: var(--smbk-typography-heading-lg-text-transform);
}

.smbk-empty-state--scope-page .smbk-empty-state__description {
  font-family: var(--smbk-typography-body-lg-font-family);
  font-size: var(--smbk-typography-body-lg-font-size);
  font-weight: var(--smbk-typography-body-lg-font-weight);
  line-height: var(--smbk-typography-body-lg-line-height);
  letter-spacing: var(--smbk-typography-body-lg-letter-spacing);
}

/* ---- small: one panel among many, as on a dashboard. The title in Label LG straight on its line in Body SM,
   the medium icon and the medium stack step, so the empty panel reads no louder than the panels beside it or
   the page's own heading. Inline keeps its tight edges; centered keeps its centring with less room round it. Last,
   so it wins over each scope's own sizes. ---- */

.smbk-empty-state--size-sm {
  gap: var(--smbk-space-stack-md);
}

.smbk-empty-state--size-sm .smbk-empty-state__icon {
  font-size: var(--smbk-size-icon-md);
}

.smbk-empty-state--size-sm .smbk-empty-state__text {
  gap: var(--smbk-space-text-label);
}

.smbk-empty-state--size-sm .smbk-empty-state__title {
  font-family: var(--smbk-typography-label-lg-font-family);
  font-size: var(--smbk-typography-label-lg-font-size);
  font-weight: var(--smbk-typography-label-lg-font-weight);
  line-height: var(--smbk-typography-label-lg-line-height);
  letter-spacing: var(--smbk-typography-label-lg-letter-spacing);
  text-transform: var(--smbk-typography-label-lg-text-transform);
}

.smbk-empty-state--size-sm .smbk-empty-state__description {
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

.smbk-empty-state--size-sm.smbk-empty-state--scope-centered,
.smbk-empty-state--size-sm.smbk-empty-state--scope-page {
  padding: var(--smbk-space-inset-xl);
}

.smbk-empty-state--size-sm.smbk-empty-state--scope-centered .smbk-empty-state__icon,
.smbk-empty-state--size-sm.smbk-empty-state--scope-page .smbk-empty-state__icon {
  font-size: var(--smbk-size-icon-lg);
}

Tokens it reads

Empty state tokens
Token and CSS	Value	Preview	Foundation
space.stack.xl--smbk-space-stack-xl	comfortable: 24pxcompact: 16pxchanges with density		Spacing
space.inset.md--smbk-space-inset-md	comfortable: 8pxcompact: 6pxchanges with density		Spacing
radius.container.md--smbk-radius-container-md	12px		Radius
color.icon.subtle--smbk-color-icon-subtle	light: #4e555edark: #c4cdd8changes with theme		Color
size.icon.lg--smbk-size-icon-lg	24px		Size
space.text.caption--smbk-space-text-caption	phone: 4pxdesktop: 8pxchanges with layout		Spacing
color.text.default--smbk-color-text-default	light: #232527dark: #e7ebf0changes with theme		Color
typography.heading-sm--smbk-typography-heading-sm-font-family--smbk-typography-heading-sm-font-size--smbk-typography-heading-sm-font-weight--smbk-typography-heading-sm-line-height--smbk-typography-heading-sm-letter-spacing--smbk-typography-heading-sm-text-transform	fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 24px · max: 32pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px	The quick brown fox	Typography
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
space.inline.lg--smbk-space-inline-lg	comfortable: 12pxcompact: 8pxchanges with density		Spacing
typography.code-sm--smbk-typography-code-sm-font-family--smbk-typography-code-sm-font-size--smbk-typography-code-sm-font-weight--smbk-typography-code-sm-line-height--smbk-typography-code-sm-letter-spacing--smbk-typography-code-sm-text-transform	fontFamily: Geist Mono, Geist Mono Fallback, ui-monospace, monospacefontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
color.feedback.warning.icon--smbk-color-feedback-warning-icon	light: #b14904dark: #fa8349changes with theme		Color
color.feedback.danger.icon--smbk-color-feedback-danger-icon	light: #cc0d0ddark: #fe7d6dchanges with theme		Color
size.icon.2xl--smbk-size-icon-2xl	40px		Size
size.width.640--smbk-size-width-640	640px		Size
space.inset.3xl--smbk-space-inset-3xl	comfortable: 32pxcompact: 24pxchanges with density		Spacing
typography.heading-md--smbk-typography-heading-md-font-family--smbk-typography-heading-md-font-size--smbk-typography-heading-md-font-weight--smbk-typography-heading-md-line-height--smbk-typography-heading-md-letter-spacing--smbk-typography-heading-md-text-transform	fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 28px · max: 40pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px	The quick brown fox	Typography
typography.body-md--smbk-typography-body-md-font-family--smbk-typography-body-md-font-size--smbk-typography-body-md-font-weight--smbk-typography-body-md-line-height--smbk-typography-body-md-letter-spacing--smbk-typography-body-md-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
size.content.md--smbk-size-content-md	720px		Size
space.section.md--smbk-space-section-md	comfortable: 64pxcompact: 48pxchanges with density		Spacing
typography.heading-lg--smbk-typography-heading-lg-font-family--smbk-typography-heading-lg-font-size--smbk-typography-heading-lg-font-weight--smbk-typography-heading-lg-line-height--smbk-typography-heading-lg-letter-spacing--smbk-typography-heading-lg-text-transform	fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 32px · max: 48pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px	The quick brown fox	Typography
typography.body-lg--smbk-typography-body-lg-font-family--smbk-typography-body-lg-font-size--smbk-typography-body-lg-font-weight--smbk-typography-body-lg-line-height--smbk-typography-body-lg-letter-spacing--smbk-typography-body-lg-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 20pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
space.stack.md--smbk-space-stack-md	comfortable: 12pxcompact: 8pxchanges with density		Spacing
size.icon.md--smbk-size-icon-md	20px		Size
space.text.label--smbk-space-text-label	0px		Spacing
typography.label-lg--smbk-typography-label-lg-font-family--smbk-typography-label-lg-font-size--smbk-typography-label-lg-font-weight--smbk-typography-label-lg-line-height--smbk-typography-label-lg-letter-spacing--smbk-typography-label-lg-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
space.inset.xl--smbk-space-inset-xl	comfortable: 16pxcompact: 12pxchanges with density		Spacing

Manifest

empty-state.manifest.json

{
  "name": "empty-state",
  "block": "smbk-empty-state",
  "summary": "The words that fill an area when what belongs there is missing or failed to load, naming the cause and offering the next step.",
  "adapt": "css",
  "axes": {
    "scope": {
      "values": [
        "inline",
        "centered",
        "page"
      ],
      "default": "inline",
      "description": "Inline sits at the start of a list or a panel it stands in for. Centered fills a larger area, centred, with a larger title. Page is the whole page, as a missing page or a page that failed to load."
    },
    "tone": {
      "values": [
        "default",
        "warning",
        "danger"
      ],
      "default": "default",
      "description": "Warning and danger color the icon for a state that needs care or an error. The words carry the meaning; the color only backs them up."
    },
    "size": {
      "values": [
        "md",
        "sm"
      ],
      "default": "md",
      "description": "Small is for one panel among many, as on a dashboard: the title in a label style, a smaller icon and smaller gaps, so an empty panel reads no louder than its neighbors."
    }
  },
  "flags": {},
  "parts": [
    "icon",
    "text",
    "title",
    "description",
    "context",
    "actions",
    "reference",
    "hidden"
  ],
  "figmaNodeId": "7117:731"
}

Menu

Customize the preview

No notes match these filters

Options

Examples

Usage

No notes match these filters

Scopes

No messages yet

No messages yet

Tones

No results for “invoces”

You are offline

This list could not load

First use

Start your first project

No permission

You can’t see this report

Missing page

This page isn’t here

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

No notes match these filters

Something went wrong

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Source

No notes match these filters

Options

Examples

Usage

No notes match these filters

Scopes

No messages yet

No messages yet

Tones

No results for “invoces”

You are offline

This list could not load

First use

Start your first project

No permission

You can’t see this report

Missing page

This page isn’t here

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

No notes match these filters

Something went wrong

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Related

Source