--- title: "Empty" description: "Displays an empty state: no data yet, no results, nothing to show, with a way forward." url: "https://susonwaiba.github.io/htmx-ui/docs/v0.2/components/empty" section: "Components" --- # Empty Displays an empty state: no data yet, no results, nothing to show, with a way forward. ```html

No projects yet

You haven't created any projects yet. Get started by creating your first project.

Learn more
``` ## Markup ```html
…icon…

No projects yet

…

…buttons, an input…
``` - `.empty` centres everything in a column and grows to fill its container. It has generous padding, more from the `md` breakpoint. - `.empty-header` holds the media, title and description, at most 24rem wide. - `.empty-media` holds an icon, an avatar or an avatar group. With `.empty-media-icon` it is a muted rounded square around an icon. - `.empty-title` says what is missing; `.empty-description` says why, or what to do. Links in the description are underlined. - `.empty-content` holds the way forward: buttons, a search field, a link. ## Outline `.empty-outline` adds a dashed border, as for a drop zone or a slot waiting to be filled. ```html

Cloud storage empty

Upload files to your cloud storage to access them anywhere.

``` ## Background `.empty-muted` adds a muted wash that fades out towards the bottom. ```html

No notifications

You're all caught up. New notifications will appear here.

``` ## Avatar An [avatar](https://susonwaiba.github.io/htmx-ui/docs/v0.2/components/avatar) in `.empty-media` (without `.empty-media-icon`) is shown at 3rem unless it has a size class of its own. It names the person in the title, so it is decorative here. ```html

Kofi is offline

Kofi is away right now. Leave a message and they'll see it when they're back.

``` ## Avatar group An avatar group is shown large and in grey, for a team that hasn't joined yet. A `.avatar-group-count` keeps its colour. ```html

No team members

Invite your team to collaborate on this project.

``` ## Input group `.empty-content` is a column up to 24rem wide, so a field fills it. Here a not-found page offers a search, using an [input group](https://susonwaiba.github.io/htmx-ui/docs/v0.2/components/input-group), and a link to help. ```html

404 – Page not found

The page you're looking for doesn't exist. Try searching for what you need below.

Need help? Contact support

``` ## Sizes `.empty-sm` is compact, for small panels, sidebars and table bodies: less padding and smaller gaps, a smaller icon square and title. ```html
Activity

No activity this week

Activity from your projects shows up here.

``` ## In a card Put the empty state in `.card-content` in place of the content that's missing. Without a variant it has no frame of its own, so it sits in the card's. ```html

Payment methods

Cards and accounts you pay with.

No payment methods

Add a card to pay for your subscription.

``` ## In a table For a table with no rows, keep the header (so the columns still explain the data) and put a compact empty state in a single cell spanning every column. ```html
InvoiceStatusAmount

No invoices found

No invoices match “acme”. Try another search, or clear the filters.
``` ## With htmx The empty state is ordinary markup, so a request can replace it with content. Here the button loads rows from the server into the table body with `hx-swap="innerHTML"`, which replaces the empty row with them: ```html
InvoiceStatusAmount

No invoices yet

Invoices you send show up here.
``` The other way round, have the server return an empty state when a search or a filter finds nothing, and the same swap shows it. An error can return one with a retry button that repeats the request and replaces the whole empty state: ```html
…icon…

Couldn't load the feed

Check your connection and try again.

``` ## Macro The `empty()` macro writes the header for you. Pass the title, and optionally a `description`, an `icon` name, a `variant` (`"outline"` or `"muted"`), a `size` (`"sm"`), the title element as `heading` (`"h3"` by default; use the level that fits the page, or `"p"`) and extra `class`es. Call it with a body to fill `.empty-content`. ```html {% from "components/empty/empty.html" import empty %} {% call empty("No messages", "New messages show up here.", icon="inbox", variant="outline") %} {% endcall %} ``` ```html

No messages

New messages show up here.

``` ## Accessibility - Make the title a heading at the level that fits where the empty state sits (it stands in for a section's content), or a `

` in small panels and table cells. - Media is decorative: the icon is hidden from screen readers, and avatars take `aria-hidden="true"`. Say everything that matters in the title and description. - Write button labels that make sense on their own: “Create project”, not “Get started”. - When an empty state replaces results that were there a moment ago (after a search), announce it: swap it into a container with `aria-live="polite"`. ## Reference | Class | Description | | --- | --- | | `.empty` | Centred column with padding (more from md) that grows to fill its container. | | `.empty-outline` | Dashed border. | | `.empty-muted` | Muted background that fades out towards the bottom. | | `.empty-sm` | Compact: less padding, smaller gaps, icon square and title. | | `.empty-header` | Media, title and description; at most 24rem wide. | | `.empty-media` | Holds an icon, an .avatar (shown at 3rem) or an .avatar-group (large, grey). | | `.empty-media-icon` | A muted rounded square around an icon. | | `.empty-title` | What is missing. | | `.empty-description` | Muted text below the title. Links are underlined. | | `.empty-content` | Actions and inputs: a centred column, at most 24rem wide. |