#Empty State

Fill an empty screen or list with a centered message, an optional icon, and an action that helps the user get started.

#Installation

npx @blotch/dolan add empty-state

import { UiEmptyState } from '../components/ui/empty-state';

This also adds Icon, which draws the optional icon.

#Usage

import { Component } from '@angular/core';
import { UiEmptyState } from '../components/ui/empty-state';

@Component({
  selector: 'app-no-results',
  imports: [UiEmptyState],
  template: `
    <ui-empty-state
      icon="search"
      title="No results found"
      description="Try adjusting your search or filters."
    />
  `,
})
export class NoResults {}

• title is required. icon and description are optional.
• icon takes any name from the Icon set, such as 'search', 'inbox' or 'plus'. It's drawn at the lg size.

#With an action

Put a button or other content inside. It renders below the description.

<ui-empty-state
  icon="inbox"
  title="No messages"
  description="Messages from your team show up here."
>
  <ui-button (pressed)="compose()">New message</ui-button>
</ui-empty-state>

Import UiButton in your component for this.

#API

#UiEmptyState

No outputs.

#Related

• Icon: every icon name icon accepts
• Button: the action to put inside
• Card: frame an empty state inside a section