@styloviz/empty-state

Full-page or inline empty states with icons, titles and action buttons.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/empty-state

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvEmptyStateComponent } from '@styloviz/empty-state';

@Component({
  standalone: true,
  imports: [SvEmptyStateComponent],
  template: `
    <sv-empty-state icon="inbox" title="No messages" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | title | string | 'Nothing here yet' | Main heading text. | | message | string | '' | Supporting message under the title. | | icon | EmptyStateIcon | 'inbox' | Built-in icon preset. Set to 'custom' and provide iconPath to use your own SVG. | | iconPath | string | '' | Custom SVG <path d="..."> — required when icon === 'custom', ignored otherwise. | | iconViewBox | string | '0 0 24 24' | SVG viewBox for a custom icon. | | showRings | boolean | true | Show the decorative concentric-ring background behind the icon. | | size | EmptyStateSize | 'md' | Overall size. | | layout | EmptyStateLayout | 'vertical' | Content stacking axis. | | bordered | boolean | true | Whether to render a card surface (border + background + rounded corners) or let the component blend into its parent. | | customClass | string | '' | Additional CSS classes on the root element. | | actions | EmptyStateAction[] | [] | CTA buttons rendered below the message. Maximum 3 — first one is typically primary, rest secondary/ghost. |

Outputs

| Output | Type | Description | | --- | --- | --- | | actionClick | string | Emitted when any action button is clicked, carrying the action's id. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/empty-state

License

MIT