Components / Empty

Empty

A compositional empty state with icon, title, description and action slots.

No projectsCreate one when you are ready.

example.component.html

html

<aevko-empty>
  <h2 aevkoEmptyTitle>
    No projects
  </h2>
  <button aevkoEmptyAction>
    Create
  </button>
</aevko-empty>

Installation

npx aevko-ui@latest add empty --yes

Source ownership

Customization

Compose the title, description, visual and action from native elements. Spacing can be changed on the host without changing the projected content contract.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`aevkoEmptyIcon`	`projected slot`	`empty`	Decorative icon or custom visual.
`aevkoEmptyTitle`	`projected slot`	`empty`	Primary empty-state heading.
`aevkoEmptyDescription`	`projected slot`	`empty`	Supporting explanation.
`aevkoEmptyAction`	`projected slot`	`empty`	Native link, button or custom action.

Accessibility contract

Accessibility

Included behavior

The decorative icon is hidden; use semantic projected heading and action elements.

Your responsibility

Project a semantic heading and a native actionable element; do not communicate the empty state through the icon alone.

Back to all components