Blocks

Empty

A placeholder for empty data states — shows an icon, title, description, and an action.

Usage

Compose with empty_header, empty_media, empty_title, empty_description, and empty_content.

No results found

Try adjusting your search or filter to find what you're looking for.

sui.empty do
  sui.empty_header do
    sui.empty_media(variant: :icon) { sui.icon(:search) }
    sui.empty_title "No results found"
    sui.empty_description "Try adjusting your search or filter to find what you're looking for."
  end
  sui.empty_content do
    sui.button "Clear filters", variant: :outline
  end
end

Without media

The media slot is optional.

No projects yet

Get started by creating your first project.

sui.empty do
  sui.empty_header do
    sui.empty_title "No projects yet"
    sui.empty_description "Get started by creating your first project."
  end
  sui.empty_content do
    sui.button "New project"
  end
end

API

Method	Key args	Description
empty	**opts	Dashed-border container, centers everything
empty_header	**opts	Wraps media + title + description
empty_media	variant: :default, :icon	Icon container; `:icon` wraps in a muted square
empty_title	name	Heading text
empty_description	name	Muted supporting text
empty_content	**opts	Action area below the header (buttons, links)