DevactionUI.EmptyState (devaction_ui v0.2.3)

Copy Markdown View Source

What a list or a screen shows when there is nothing in it yet. Every empty one says what the area is, why it is empty and the one next step.

:dashed (the default) is the card with a dashed border; :page is the whole-area one, with the squared grid behind its icon, a kicker, a title, a text and a main action with an optional second one; :inline is the small row inside a table, a list or a search with no result.

tone colors what the variant shows: on :inline, :neutral is the dashed box of an empty search, :ok is the green row of a queue that is done and :risk the red row of a load that failed, with its action ("Try again") on the right; on :page, it tints the icon (:warn for something that needs attention). An inline one is aria-live, so a result that changes is read out.

heading_level (2 to 6) is the level of the title of :page and :dashed; the inline one has no heading.

Summary

Functions

empty_state(assigns)

Functions

empty_state(assigns)

Attributes

  • title (:string) (required)
  • text (:string) - Defaults to nil.
  • variant (:atom) - Defaults to :dashed. Must be one of :dashed, :page, or :inline.
  • tone (:atom) - :neutral, :ok or :risk for :inline; :neutral or :warn for the icon of :page. Defaults to :neutral. Must be one of :neutral, :ok, :warn, or :risk.
  • heading_level (:integer) - the heading level of the title (:page and :dashed). Defaults to 2. Must be one of 2, 3, 4, 5, or 6.
  • kicker (:string) - a small mono line over the title (:page). Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - the icon, drawn by the caller.
  • action - the button or link that fixes the emptiness.
  • secondary - a second, quieter way out (:page).