Empty states

Zero-result placeholders with centered icon, title, description, and an optional call-to-action.

Preview

No projects

Get started by creating a new project.

Drop files here

or click to browse

React preview

LiveView (HEEx)

alias DesignSystem.UI.{Buttons, EmptyStates}

<EmptyStates.empty_state
  title="No projects"
  description="Get started by creating a new project."
>
  <:icon>
    <.icon name="hero-folder" class="size-12" />
  </:icon>
  <:action>
    <Buttons.button phx-click="new_project">
      <.icon name="hero-plus-mini" class="mr-1.5 -ml-0.5 size-5" /> New project
    </Buttons.button>
  </:action>
</EmptyStates.empty_state>

React (JSX)

import { FolderIcon, PlusIcon } from "@heroicons/react/24/outline"
import { Button, EmptyState } from "../ui/index.mjs"

<EmptyState
  title="No projects"
  description="Get started by creating a new project."
  icon={<FolderIcon className="size-12" />}
  action={
    <Button onClick={onCreate}>
      <PlusIcon className="mr-1.5 -ml-0.5 size-5" />
      New project
    </Button>
  }
/>