Skip to content

Empty state

Use the si-empty-state component in places where you would normally display data, but there is none available. For example, in lists with filters/search when no data is left after filtering. You can customize the icon and text to your needs.

Design ---

Empty state specification

An empty state component consists of the following elements:

  1. Icon: The object icon associated with the current view.
  2. Title: A short and concise title to describe the state. A simple wording should be used (e.g. No devices) and full sentences shall be avoided.
  3. Text: A more detailed explanation of the state, outlining the reasoning for it and how a user can resolve it (optional).
  4. Actions: Allows the user to take actions to resolve the issue (optional).

Code ---

Usage

import { SiEmptyStateComponent } from '@siemens/element-ng/empty-state';

@Component({
  imports: [SiEmptyStateComponent, ...]
})