Empty State — Playground

px
No projects yet
Create the first project to start working with your team.
context
size
State
html.html
<kui-empty-state heading="No projects yet" description="Create the first project to start working with your team.">
  <kui-icon kuiEmptyStateIcon name="package" />

  <div kuiEmptyStateActions>
    <button kuiButton type="button">Create project</button>
    <button kuiButton shape="ghost" type="button">Import</button>
  </div>
</kui-empty-state>
NameTypeDefaultDescription
headingstring-Required empty-state heading text. Visual text only, not a forced heading level.
descriptionstring | nullnullOptional supporting text rendered below the title.
context'no-data' | 'no-results' | 'error' | 'no-access' | 'success''no-data'Semantic context. Only changes the icon accent, not layout.
size'sm' | 'md' | 'lg''md'Empty-state layout size. Small uses a compact horizontal layout.
[kuiEmptyStateIcon]KuiEmptyStateIconDirective-Marks projected visual content as the decorative icon slot. Kikita marks it aria-hidden.
[kuiEmptyStateActions]KuiEmptyStateActionsDirective-Marks projected content as the action slot for native buttons, links, or Kikita button directives.

Inputs verified against @kikita-labs/ui v1.6.1 v1.6.1 public typings.