components empty

components/empty

Import: import { Empty } from "@tundralibs/ui/empty"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Empty

Empty(props: EmptyProps): Html

Every empty state names what is missing and offers the action that fixes it. An icon alone is not an empty state.

Types

EmptyProps

Prop	Type	Required	Description
title	string	yes
text	string
icon	IconName
actions	Html
variant	`"card"	"inline"	"page"`
tone	`"default"	"error"`
code	string		Request id / status, shown monospaced. Error tone only.

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

An empty list with a way forward

Empty({
  title: "No invoices yet",
  text: "Create the first one and it will show up here.",
  icon: "invoice",
  actions: Button({ label: "New invoice", href: "/invoices/new" }),
})

<div class="empty">
  <span class="empty__icon">
    <svg width="21" height="21" width="2" …>…</svg>
  </span>
  <span class="empty__title">No invoices yet</span>
  <span class="empty__text">Create the first one and it will show up here.</span>
  <span class="empty__actions">
    <a class="btn" href="/invoices/new">New invoice</a>
  </span>
</div>

A failed load, with the request id

Empty({ variant: "inline", tone: "error", title: "Could not load invoices", code: "req_01J8ZK3Q" })

<div class="empty empty--inline empty--error">
  <span class="empty__body">
    <span class="empty__title">Could not load invoices</span>
    <span class="empty__code">req_01J8ZK3Q</span>
  </span>
</div>

CSS hooks

Classes defined by components/empty/empty.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.empty, .empty--error, .empty--inline, .empty--page, .empty__actions, .empty__body, .empty__code, .empty__icon, .empty__text, .empty__title