Logo

Empty

Composable empty states with media, title, description, actions, inputs, avatars, and RTL support.

Preview

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

Learn More

Usage

TS 

import { FrEmptyModule } from '@frame-ui-ng/components/empty';
import { FrButtonModule } from '@frame-ui-ng/components/button';

HTML 

<div frEmpty>
  <div frEmptyHeader>
    <div frEmptyMedia variant="icon">
      <ng-icon name="tablerFolderCode" />
    </div>
    <h3 frEmptyTitle>No data</h3>
    <p frEmptyDescription>No data found.</p>
  </div>
  <div frEmptyContent>
    <button frButton type="button">Add data</button>
  </div>
</div>

Examples

Outline

Use `variant="outline"` to create a bordered empty state.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

Background

Use `variant="soft"` or local token overrides to add a subtle background.

No Notifications

You're all caught up. New notifications will appear here.

Avatar

Use EmptyMedia to display an avatar inside the empty state.

LR

User Offline

This user is currently offline. You can leave a message or try again later.

Avatar Group

Use EmptyMedia to display an avatar group when the empty state refers to people or teams.

CNLRER

No Team Members

Invite your team to collaborate on this project.

Input Group

Place inputs, search fields, or compact forms inside EmptyContent.

404 - Not Found

The page you're looking for doesn't exist. Try searching below.

Need help? Contact support

RTL

Empty states inherit text direction from their container.

لا توجد مشاريع بعد

لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.

تعرف على المزيد

Token Inspector

Inspect the empty state shell, header, media, title, description, and action content.

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

Design Tokens

Empty tokens style the root layout, media well, copy, and action spacing while leaving nested components like Button, Input, and Avatar to their own token contracts.

SCSS 


  --frame-empty-padding: 3rem 1.5rem;
  --frame-empty-gap: 1.5rem;
  --frame-empty-radius: var(--frame-radius-lg);
  --frame-empty-border: transparent;
  --frame-empty-bg: transparent;
  --frame-empty-color: var(--frame-foreground);
  --frame-empty-outline-border: var(--frame-border);
  --frame-empty-soft-bg: var(--frame-muted);
  --frame-empty-header-gap: 0.75rem;
  --frame-empty-content-gap: 0.75rem;
  --frame-empty-media-size: 3rem;
  --frame-empty-media-radius: var(--frame-radius-lg);
  --frame-empty-media-bg: var(--frame-muted);
  --frame-empty-media-color: var(--frame-muted-foreground);
  --frame-empty-media-icon-size: 1.5rem;
  --frame-empty-title-color: var(--frame-foreground);
  --frame-empty-title-font-size: 1rem;
  --frame-empty-title-font-weight: 600;
  --frame-empty-description-color: var(--frame-muted-foreground);
  --frame-empty-description-font-size: 0.875rem;
  --frame-empty-description-max-width: 32rem;