Use an Empty State whenever a view, table, list, or section has no content to display. Rather than showing a blank area, an Empty State provides visual feedback that the system is working correctly. It communicates the absence of content clearly and, when appropriate, guides the user toward the next step.
Anatomy
Icon
- A Font Awesome icon placed at the top, visually representing the context of the empty content (e.g. a search icon for no results, a bell icon for no notifications).
- Displayed in a muted color to keep the tone informational rather than alarming.
Title
- A short, bold heading that states what is empty (e.g. "No data found", "No triggers yet").
Subtitle
- A brief sentence providing additional context or explaining why the area is empty.
- Can suggest what the user can do to populate the view.
Action (optional)
- A button placed below the subtitle to guide the user toward a next step (e.g. "Create trigger", "Adjust filters", "Import data").
- Omit the action when the empty state is purely informational and no user action can resolve it (e.g. "No errors in the last 24 hours").