Github

Empty State

Empty states explain why content is missing and guide users to a next action.

Component variations

Default

Includes icon, message, and both secondary/primary actions.

Title goes here

Nothing more exciting happening here in terms of content, but just filling up the space to make it look representative.

Without Icon

Use when iconography does not add useful context.

Title goes here

Nothing more exciting happening here in terms of content, but just filling up the space to make it look representative.

Single Action

Provide only one label to render just that action button.

No Items

Go Back

Boxed

Use boxed to toggle between boxed and unboxed presentation.

Title goes here

Nothing more exciting happening here in terms of content, but just filling up the space to make it look representative.

Title goes here

Nothing more exciting happening here in terms of content, but just filling up the space to make it look representative.

Usage Guidelines

Import

Import the empty state component in your module or standalone component:

import-empty-state.ts

Copy code

Basic Implementation

Use a clear title, concise description, and a meaningful primary action.

my.component.html

Copy code

Without Icon

Hide the icon for compact layouts or text-only contexts.

my.component.html

Copy code

Unboxed Variant

Set [boxed]="false" to remove outer padding, border, and background.

my.component.html

Copy code

Without Action

Hide action button for passive informational states.

my.component.html

Copy code

API Reference

Inputs

Property
Type
Default
Required
Description
title
string
-
Yes
Heading shown as the primary message
description
string
-
No
Supporting description shown below the title
icon
string
'vd-icon-placeholder'
No
Icon class rendered in the icon container
showIcon
boolean
true
No
Show or hide the icon container
boxed
boolean
true
No
When true, renders padded boxed container with border/background. When false, removes padding, border and background
primaryActionLabel
string
''
No
Primary button label. Visible only when label is provided
secondaryActionLabel
string
''
No
Secondary button label. Visible only when label is provided

Outputs

Property
Type
Description
primaryActionClick
EventEmitter<void>
Emitted when the primary action button is clicked
secondaryActionClick
EventEmitter<void>
Emitted when the secondary action button is clicked

Best Practices

When to Use

  • Use Empty State when the current screen has no content to display yet.
  • Use it to provide users with a clear next action.

When Not to Use

  • Avoid using Empty State for loading scenarios; use a loading indicator instead.
  • Avoid using it when data exists but is temporarily filtered out without explanation.

Design Guidelines

  • Write concise and action-oriented titles and descriptions.
  • Use a relevant icon only when it adds context.
  • Prefer one clear primary action to reduce decision friction.
  • Keep text content short and easy to scan.
  • Ensure the call to action is keyboard accessible.

Component playground

Customize the empty state props in this section

Title goes here

Nothing more exciting happening here in terms of content, but just filling up the space to make it look representative.

empty-state.component.html

Copy code