Empty
Displays a placeholder when there is no content to show. Useful for first-time use, successful clearing of data, or search results with no matches.
Default
A standard empty state with an icon, title, description, and primary actions.
No Projects Yet
You haven't created any projects yet. Get started by creating your first project or importing an existing one.
empty-example-default.ts
Dashed Outline
Using a dashed border to define the empty area, common for upload zones or optional content.
Cloud Storage Empty
Upload files to your cloud storage to access them anywhere.
empty-example-outline.ts
Gradient Background
Add visual interest with subtle background gradients and colored accents.
No notifications
You're all caught up. New notifications will appear here when they arrive.
empty-example-background.ts
User/Profile State
Using avatars instead of icons to represent people-related empty states.
User is Offline
John Doe is currently away. You can leave a message and they will be notified when they return.
empty-example-avatar.ts
Team / Collaboration
Advanced layouts featuring overlapping elements and bold typography.
No Team Members
This project is looking a bit lonely. Invite your team members to start collaborating, sharing files, and crushing goals together.
empty-example-avatar-group.ts
API Reference
The Empty component is a set of styling directives to build consistent placeholder states.
Helm API
| Directive | Selector | Description |
|---|---|---|
| HlmEmptyDirective | [hlmEmpty] | Main container for the empty state. Handles flex layout and centering. |
| HlmEmptyHeaderDirective | [hlmEmptyHeader] | Groups the media, title, and description. |
| HlmEmptyMediaDirective | [hlmEmptyMedia] | Container for the visual element (icon or image). Use variant="icon" for standard icon styling. |
| HlmEmptyTitleDirective | [hlmEmptyTitle] | Styles the main heading of the empty state. |
| HlmEmptyDescriptionDirective | [hlmEmptyDescription] | Styles the supporting text below the title. |
| HlmEmptyContentDirective | [hlmEmptyContent] | Container for action buttons or extra content. |