Skip to content
zits/ui

Empty

Overview

Section titled “Overview”

Empty is a family of layout div/p wrappers (ZitsEmpty, ZitsEmptyHeader, ZitsEmptyMedia, ZitsEmptyTitle, ZitsEmptyDescription, ZitsEmptyContent) with fixed Tailwind class sets and a data-slot marker each. It composes no Navius primitive and implements no behavior; it is purely a layout scaffold for an empty/zero-state panel.

Install

Section titled “Install”
Terminal window
navius add empty --to ./src/MyApp --namespace MyApp.Ui

Usage

Section titled “Usage”
@using Zits.Ui.Components


<ZitsEmpty>
    <ZitsEmptyHeader>
        <ZitsEmptyMedia Variant="icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3h18v18H3z" /></svg>
        </ZitsEmptyMedia>
        <ZitsEmptyTitle>No results</ZitsEmptyTitle>
        <ZitsEmptyDescription>Try adjusting your filters.</ZitsEmptyDescription>
    </ZitsEmptyHeader>
    <ZitsEmptyContent>
        <ZitsButton Variant="outline">Clear filters</ZitsButton>
    </ZitsEmptyContent>
</ZitsEmpty>

Parts and props

Section titled “Parts and props”

ZitsEmpty, ZitsEmptyHeader, ZitsEmptyTitle, ZitsEmptyDescription, and ZitsEmptyContent take only ChildContent/Attributes. ZitsEmptyMedia additionally has:

Prop Type Default Description
Variant string "default" "default" renders a transparent container; "icon" renders a muted rounded tile sized for a glyph.

Styling surface

Section titled “Styling surface”

Every part accepts class via Attributes, merged with its own base class through Cn.Merge.

Parameter Values
ZitsEmptyMedia.Variant default · icon

Data attribute hooks

Section titled “Data attribute hooks”
Part Attribute Description
Root data-slot="empty" Structural marker on ZitsEmpty.
Header data-slot="empty-header" Structural marker on ZitsEmptyHeader.
Media data-slot="empty-icon" / data-variant Structural marker plus the active Variant on ZitsEmptyMedia.
Title data-slot="empty-title" Structural marker on ZitsEmptyTitle.
Description data-slot="empty-description" Structural marker on ZitsEmptyDescription.
Content data-slot="empty-content" Structural marker on ZitsEmptyContent.

Empty has no role or interactive semantics of its own: each part is a plain div/p, so any role/aria-* a given usage needs must be supplied by the caller through Attributes.