EmptyState

Communicates that a view has no content yet and guides users toward a next step. Use when a list, panel, or page is intentionally empty — not for loading or error states.

Also known as blank state, zero state, or no-data state.

Installation

Install the empty-state, the theme package, and the font package matching your project's brand:

Leroy Merlin projects

npm install @ptlm-azulejo/empty-state @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
# or
yarn add @ptlm-azulejo/empty-state @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin

Adeo projects

npm install @ptlm-azulejo/empty-state @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
# or
yarn add @ptlm-azulejo/empty-state @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo

Styles & theming

The empty-state ships no colors or typeface of its own — it reads design tokens from CSS variables at runtime. Those tokens come from @ptlm-azulejo/themes, and the brand is selected by a class on your app's <html> element.

| Project | Preset stylesheet | Root class | Typeface | Font package | | ------------ | ----------------------------------------------- | ------------- | --------------- | ---------------------------------- | | Leroy Merlin | @ptlm-azulejo/themes/presets/leroy-merlin.css | preset-lm | LeroyMerlinSans | @ptlm-azulejo/fonts-leroy-merlin | | Adeo | @ptlm-azulejo/themes/presets/adeo.css | preset-adeo | Roboto | @ptlm-azulejo/fonts-adeo |

Leroy Merlin projects

import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
import '@ptlm-azulejo/fonts-leroy-merlin'
import '@ptlm-azulejo/empty-state/style.css'

<html lang="pt" class="preset-lm"></html>

Adeo projects

import '@ptlm-azulejo/themes/presets/adeo.css'
import '@ptlm-azulejo/fonts-adeo'
import '@ptlm-azulejo/empty-state/style.css'

<html lang="pt" class="preset-adeo"></html>

Without a preset and the .preset-* class, the component renders uncolored and in a fallback typeface. See the themes package for brand switching, dark mode, and custom brands.

Light and dark mode

<html lang="pt" class="preset-lm" data-theme="dark"></html>

Props

| Name | Type | Default | Description | | ---------------- | -------------------------------- | -------------- | ------------------------------------------------------------ | | title | string | — | Main heading (Title/S, text-lg / 18px). | | paragraph | string | — | Supporting message (Body/S, text-sm / 14px). | | showIcon | boolean | true | Renders the icon slot wrapper when an icon slot is provided. | | hideParagraph | boolean | false | When true, hides the paragraph block. | | headingLevel | 1–6 | 2 | Heading level for the title (h1–h6). | | iconAppearance | 'on-primary' \| 'on-secondary' | 'on-primary' | Icon circle background relative to the page surface. | | actionsLabel | string | 'Actions' | Accessible name for the actions group. | | ui | EmptyStateUi | {} | Per-part Tailwind class overrides (merged via cn()). |

Slots

| Name | Description | | ---------------- | ----------------------------------------------------------------- | | icon | Decorative illustration above the title (always aria-hidden). | | title | Override the default title text. | | paragraph-text | Override the default paragraph text or provide rich content. | | actions | Primary and secondary actions (typically @ptlm-azulejo/button). |

:ui parts

| Key | Element | | ------------- | ----------------------- | | root | Outer <section> | | iconWrapper | Circular icon container | | icon | Inner 64px icon box | | content | Content column | | text | Title + paragraph stack | | title | Heading | | paragraph | Supporting paragraph | | actions | Actions group |

Basic usage

<script setup>
import { AzEmptyState } from '@ptlm-azulejo/empty-state'
import { AzButton } from '@ptlm-azulejo/button'
</script>

<template>
  <AzEmptyState
    title="No tokens yet."
    paragraph="Import or create your first tokens to find them here and start using them across your projects."
  >
    <template #icon>
      <!-- decorative illustration -->
    </template>
    <template #actions>
      <AzButton size="s">Add tokens</AzButton>
      <AzButton size="s" ghost>Read the docs</AzButton>
    </template>
  </AzEmptyState>
</template>