Empty State: Onboarding

Introduces and helps users get started with a product feature they haven't used yet.

Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.

When to use

  • As the only content displayed in the Page Layout Level 1 and 2 areas, to introduce a product feature that has no content yet

When not to use

  • Inside a specific area on a page, e.g., Argo CD Applications on a Release page
  • When you want to keep the page’s existing UI above the empty state (use Empty State: Inline Onboarding instead)
  • When a user’s search or filter query has no results (use Empty State: No Results instead)

Best practices

Do

Do use an "Onboarding" empty state when a product feature's entire page has no content.

Do

Do customize the illustration to represent the type of product feature.

Don't

Don't use an "Onboarding" empty state when a product feature has no content inside a specific area on a page.

Don't

Don't use an "Onboarding" empty state while also displaying the rest of the existing UI (heading and button). Use Empty State: Inline Onboarding instead.

Caution

Be careful with displaying an Actionable Callout, as it can add more visual noise and dilute the messaging if there is already a lot of copy or several actions on the page.