Empty state

A message that takes the place of content when a screen or section is empty.

empty-state-image-android

Empty state

Android Components library

Usage

An empty state fills a screen or section that has no content to show. Use it when the absence is expected, such as before someone saves a first bookmark, and say what the space is for and how to fill it. It is not an error message.

  • Lead with what the person can do next, not with what is missing.
  • Give the primary action a filled button and remove the secondary button when there is only one thing to do.
  • Swap the illustration slot for artwork that belongs to the feature, or leave the slot empty.
  • Keep the empty state inside the area it describes, so the app bar and toolbar stay where they are.
  • Use for something the person has to fix (use an info card).
  • Use to promote a feature unrelated to the empty space (use a promo card or a CFR).
  • Add a close control, because an empty state stays until there is content to replace it.

Design properties

Property Values Default
Show buttons Boolean true | false true
Show secondary button Boolean true | false true

Types

Message only

Use when there is nothing for the person to do and the space only needs explaining.

android-empty-state-light
android-empty-state-dark

One action

Use when a single action fills the space, such as saving a first bookmark.

android-empty-state-one-button-light
android-empty-state-one-button-dark

Two actions

Use when a lower-emphasis second action is genuinely useful, such as reading about the feature first.

android-empty-state-two-button-light
android-empty-state-two-button-dark

Behavior and interaction

Behavior

  • The empty state appears with the surface it belongs to. Nothing the person just did triggers it.
  • It is not dismissible and has no close control. It stays until there is content to replace it.
  • Only the buttons respond to touch. The title, the body copy, and the illustration do not.

Positioning

  • Center the empty state in the area it describes, and leave the app bar and toolbar in place around it.
  • At the narrowest supported width the buttons span the content width and stack, and the title and body copy wrap.

Writing guidelines

Reference Writing for Empty States for empty state writing guidelines.

Related components

Button

A control that carries out an action on the current screen.

Changelog

Date

Version

Notes

Sep 8, 2026

1.0.0

Initial draft of guidance

Acorn Design System ©2026 Mozilla