Empty State

What a screen says when there is nothing to show yet, and the way forward.

Data displayemptyonboarding

Workbench

Rendering Empty State…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add empty-state

Usage

TSX

import { IconMail } from "@mlola-ui/icons";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";

export default function Example() {
  return (
    <EmptyState
      icon={<IconMail size="1.5em" />}
      title="No messages yet"
      description="New conversations appear here."
      actions={<Button size="sm">Start one</Button>}
    />
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

Examples

A whole page

The page size explains what will live here and gives the first step.

Rendering A whole page…

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

HTML

<section class="ml-empty" data-size="inline">
  <span class="ml-empty-icon" aria-hidden="true"><svg class="mlola-glyph" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--mlola-glyph-stroke, var(--ml-icon-stroke, 1.75))" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" data-optical-size="default" style="color:var(--mlola-glyph-color, currentColor);scale:var(--mlola-glyph-optical-scale, 1);transform-origin:center"><rect x="3" y="5" width="18" height="14" rx="2" pathLength="1"></rect><path d="m4 7 8 6 8-6" pathLength="1"></path></svg></span>
  <h3 class="ml-empty-title">No messages yet</h3>
  <p class="ml-empty-description">New conversations appear here.</p>
  <div class="ml-empty-actions">
    <button class="ml-button" type="button" data-variant="primary" data-size="sm"><span class="ml-button-label">Start one</span></button>
  </div>
</section>

Options

Prop	Values	Default	Description
`size`	`inlinepage`	`inline`	"page" centers in a large area; "inline" sits inside a card or table.

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-empty`	`data-size="page"`
`ml-empty-icon`	—
`ml-empty-title`	—
`ml-empty-description`	—
`ml-empty-actions`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Open the standalone preview