Data display

Empty

A centered message for a space with nothing to show yet, with an optional icon and next step.

Class name	Type	Description
`emptyplf:empty`	Component	An empty state
`empty-headerplf:empty-header`	Part	The media, title and description
`empty-mediaplf:empty-media`	Part	The icon tile
`empty-iconplf:empty-icon`	Part	An SVG icon; an icon class there doesn't need it
`empty-titleplf:empty-title`	Part	The title
`empty-descriptionplf:empty-description`	Part	The description
`empty-contentplf:empty-content`	Part	The next step, such as a button
`empty-outlineplf:empty-outline`	Style	A dashed border

Default

No projects yet

Create your first project to get started.

<div class="empty">
  <div class="empty-header">
    <div class="empty-media">
      <span class="icon icon-folder"></span>
    </div>
    <h3 class="empty-title">No projects yet</h3>
    <p class="empty-description">Create your first project to get started.</p>
  </div>
  <div class="empty-content">
    <button class="btn btn-primary">Create project</button>
  </div>
</div>

<div class="plf:empty">
  <div class="plf:empty-header">
    <div class="plf:empty-media">
      <span class="plf:icon plf:icon-folder"></span>
    </div>
    <h3 class="plf:empty-title">No projects yet</h3>
    <p class="plf:empty-description">Create your first project to get started.</p>
  </div>
  <div class="plf:empty-content">
    <button class="plf:btn plf:btn-primary">Create project</button>
  </div>
</div>

import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Icon } from '@pelatform/react';

export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia>
          <Icon name="folder" />
        </EmptyMedia>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>Create your first project to get started.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button color="primary">Create project</Button>
      </EmptyContent>
    </Empty>
  );
}

import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia>
          <Icon name="folder" />
        </EmptyMedia>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>Create your first project to get started.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button color="primary">Create project</Button>
      </EmptyContent>
    </Empty>
  );
}

Outline

No results found

Try a different search term.

<div class="empty empty-outline">
  <div class="empty-header">
    <div class="empty-media">
      <span class="icon icon-search"></span>
    </div>
    <h3 class="empty-title">No results found</h3>
    <p class="empty-description">Try a different search term.</p>
  </div>
  <div class="empty-content">
    <button class="btn btn-outline">Clear search</button>
  </div>
</div>

<div class="plf:empty plf:empty-outline">
  <div class="plf:empty-header">
    <div class="plf:empty-media">
      <span class="plf:icon plf:icon-search"></span>
    </div>
    <h3 class="plf:empty-title">No results found</h3>
    <p class="plf:empty-description">Try a different search term.</p>
  </div>
  <div class="plf:empty-content">
    <button class="plf:btn plf:btn-outline">Clear search</button>
  </div>
</div>

import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Icon } from '@pelatform/react';

export function Example() {
  return (
    <Empty variant="outline">
      <EmptyHeader>
        <EmptyMedia>
          <Icon name="search" />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>Try a different search term.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline">Clear search</Button>
      </EmptyContent>
    </Empty>
  );
}

import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Empty variant="outline">
      <EmptyHeader>
        <EmptyMedia>
          <Icon name="search" />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>Try a different search term.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline">Clear search</Button>
      </EmptyContent>
    </Empty>
  );
}

Inside a card

Inside a Card, lower both paddings so they do not add up.

Notifications

You're all caught up

New notifications will appear here.

<div class="card" style="--plf-card-padding: var(--plf-space-4)">
  <div class="card-header">
    <h3 class="card-title">Notifications</h3>
  </div>
  <div class="card-body">
    <div class="empty" style="--plf-empty-padding: var(--plf-space-4)">
      <div class="empty-header">
        <div class="empty-media">
          <span class="icon icon-bell"></span>
        </div>
        <h4 class="empty-title">You're all caught up</h4>
        <p class="empty-description">New notifications will appear here.</p>
      </div>
    </div>
  </div>
</div>

<div class="plf:card" style="--plf-card-padding: var(--plf-space-4)">
  <div class="plf:card-header">
    <h3 class="plf:card-title">Notifications</h3>
  </div>
  <div class="plf:card-body">
    <div class="plf:empty" style="--plf-empty-padding: var(--plf-space-4)">
      <div class="plf:empty-header">
        <div class="plf:empty-media">
          <span class="plf:icon plf:icon-bell"></span>
        </div>
        <h4 class="plf:empty-title">You're all caught up</h4>
        <p class="plf:empty-description">New notifications will appear here.</p>
      </div>
    </div>
  </div>
</div>

import type { CSSProperties } from 'react';
import { Card, CardBody, CardHeader, CardTitle, Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Icon } from '@pelatform/react';

export function Example() {
  return (
    <Card style={{ '--plf-card-padding': 'var(--plf-space-4)' } as CSSProperties}>
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
      </CardHeader>
      <CardBody>
        <Empty style={{ '--plf-empty-padding': 'var(--plf-space-4)' } as CSSProperties}>
          <EmptyHeader>
            <EmptyMedia>
              <Icon name="bell" />
            </EmptyMedia>
            <EmptyTitle level={4}>You're all caught up</EmptyTitle>
            <EmptyDescription>New notifications will appear here.</EmptyDescription>
          </EmptyHeader>
        </Empty>
      </CardBody>
    </Card>
  );
}

import type { CSSProperties } from 'react';
import { Card, CardBody, CardHeader, CardTitle, Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Card style={{ '--plf-card-padding': 'var(--plf-space-4)' } as CSSProperties}>
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
      </CardHeader>
      <CardBody>
        <Empty style={{ '--plf-empty-padding': 'var(--plf-space-4)' } as CSSProperties}>
          <EmptyHeader>
            <EmptyMedia>
              <Icon name="bell" />
            </EmptyMedia>
            <EmptyTitle level={4}>You're all caught up</EmptyTitle>
            <EmptyDescription>New notifications will appear here.</EmptyDescription>
          </EmptyHeader>
        </Empty>
      </CardBody>
    </Card>
  );
}

React

Empty from @pelatform/react renders this markup from its props, and each part is a component of its own.

Prop	Values	Default
`variant`	`outline`, a dashed border	No border

The parts:

Part	Element
`EmptyHeader`	A `div` with `empty-header`
`EmptyMedia`	A `div` with `empty-media`
`EmptyTitle`	An `h3` with `empty-title`, or another heading with `level`
`EmptyDescription`	A `p` with `empty-description`
`EmptyContent`	A `div` with `empty-content`

Other props are the element’s own, className and ref included.

CSS variables

Override on a root or on a single empty state.

Variable	Default
`--plf-empty-padding`	Space 6 (24px)
`--plf-empty-gap`	Space 4 (16px), between the header and content and inside the content
`--plf-empty-radius`	Extra large radius (12px)
`--plf-empty-bg`	`transparent`
`--plf-empty-color`	Text; the title and icon inherit it
`--plf-empty-border`	Transparent; `--plf-color-border-subtle` with `empty-outline`. The border is always dashed
`--plf-empty-description-color`	Muted text
`--plf-empty-media-bg`	Muted surface
`--plf-empty-icon-size`	Space 6 (24px)
`--plf-empty-content-max-width`	`24rem`, for the header and content

#Default

No projects yet

#Outline