Ivorie

Empty

A placeholder for an empty list, page or search result.

import { … } from '@inlaylab/ivorie/empty'
No projects yetYou have not created any projects. Create one to get started.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';
import { IV_EMPTY_IMPORTS } from '@inlaylab/ivorie/empty';
import { LucideFolderCode } from '@lucide/angular';

@Component({
  selector: 'demo-empty',
  imports: [IV_EMPTY_IMPORTS, IvButton, LucideFolderCode],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-empty>
      <iv-empty-header>
        <iv-empty-media variant="icon"><svg lucideFolderCode aria-hidden="true"></svg></iv-empty-media>
        <iv-empty-title>No projects yet</iv-empty-title>
        <iv-empty-description>You have not created any projects. Create one to get started.</iv-empty-description>
      </iv-empty-header>
      <iv-empty-content>
        <div class="flex gap-2">
          <button ivButton type="button">Create project</button>
          <button ivButton type="button" variant="outline">Import project</button>
        </div>
      </iv-empty-content>
    </iv-empty>
  `,
})
export default class EmptyDemo {}

Installation

CLInpm
npx ivorie add empty

Tell users why the area is empty and what they can do next.

Usage

import { IV_EMPTY_IMPORTS } from '@inlaylab/ivorie/empty';
<iv-empty>
  <iv-empty-header>
    <iv-empty-media variant="icon"><svg lucideInbox aria-hidden="true"></svg></iv-empty-media>
    <iv-empty-title>No messages</iv-empty-title>
    <iv-empty-description>New messages show up here.</iv-empty-description>
  </iv-empty-header>
  <iv-empty-content>
    <button ivButton>Compose</button>
  </iv-empty-content>
</iv-empty>

Examples

Outline

Cloud storage is emptyUpload files to see them here.
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';
import { IV_EMPTY_IMPORTS } from '@inlaylab/ivorie/empty';
import { LucideCloud } from '@lucide/angular';

@Component({
  selector: 'demo-empty-outline',
  imports: [IV_EMPTY_IMPORTS, IvButton, LucideCloud],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-empty class="border">
      <iv-empty-header>
        <iv-empty-media variant="icon"><svg lucideCloud aria-hidden="true"></svg></iv-empty-media>
        <iv-empty-title>Cloud storage is empty</iv-empty-title>
        <iv-empty-description>Upload files to see them here.</iv-empty-description>
      </iv-empty-header>
      <iv-empty-content>
        <button ivButton type="button" variant="outline" size="sm">Upload files</button>
      </iv-empty-content>
    </iv-empty>
  `,
})
export default class EmptyOutlineDemo {}

API

Every part also accepts class.

iv-empty-media

Name Type Default Description
variant 'default' | 'icon' 'default' icon puts the content in a muted square.

Other parts: iv-empty, iv-empty-header, iv-empty-title, iv-empty-description, iv-empty-content. They have no inputs.

Accessibility

Plain content with no role. Mark decorative icons aria-hidden="true".