Empty state

<oblyx-empty-state> is a placeholder shown in place of content that would otherwise be there: a zero-results search, a not-yet-populated list, an empty table. It carries a heading, an optional description and icon, and an optional action row.

<oblyx-empty-state heading="No projects yet"></oblyx-empty-state>

oblyxEmptyState(heading = "No projects yet")

Description and icon

description adds supporting text under the heading. icon resolves against the same registry <oblyx-icon> uses; there is no default, since an empty state has no inherent status the way <oblyx-alert> does.

<oblyx-empty-state
  heading="No results"
  description="Try a different search term or clear your filters."
  icon="search"
></oblyx-empty-state>

oblyxEmptyState(
  heading = "No results",
  description = "Try a different search term or clear your filters.",
  icon = OblyxIconName.SEARCH,
)

Action row

The element's own light content is a single action row, typically one or more <oblyx-button> elements, for the one action that resolves the empty state, such as creating the first record.

<oblyx-empty-state
  heading="No projects yet"
  description="Create your first project to get started."
>
  <oblyx-button variant="primary">New project</oblyx-button>
</oblyx-empty-state>

oblyxEmptyState(
  heading = "No projects yet",
  description = "Create your first project to get started.",
) {
  oblyxButton(variant = OblyxButtonVariant.PRIMARY) { +"New project" }
}

Compact

compact tightens padding and spacing, and stacks the action row vertically instead of horizontally. Use it where an empty state sits in a small space, such as inside a table's empty row.

<oblyx-empty-state
  compact
  heading="No results"
  description="Try a different search term."
  icon="search"
></oblyx-empty-state>

oblyxEmptyState(
  compact = true,
  heading = "No results",
  description = "Try a different search term.",
  icon = OblyxIconName.SEARCH,
)

heading, not title

The heading attribute is heading, not title. title is already a global HTML attribute, the native hover-tooltip text every element carries, so reusing it here would both arm a tooltip nobody asked for and collide with the type every element already declares for it.

Reference