Feedback

Stable - @kikita-labs/ui v1.6.1 v1.6.1

Empty State

Displays a non-blocking no-data, no-results, error, no-access, or success state inside a known UI region.

Import

Import the public component and slot directives from the package entrypoint.

empty-state.ts
import {
  KuiButtonDirective,
  KuiEmptyStateActionsDirective,
  KuiEmptyStateComponent,
  KuiEmptyStateIconDirective,
} from '@kikita-labs/ui';

Usage

Open in Playground

Project a decorative icon and, when relevant, an action row. Use surrounding page structure for heading hierarchy.

No projects yet
Create the first project to start working with your team.
<div class="basic-empty-state-example">
  <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>
</div>

Contexts

context changes the icon accent only; it does not change layout or add copy. Combine it with the right heading, description, and actions for each situation.

No results
Try a different search term or clear your filters.
Couldn't load projects
Something went wrong while loading this list.
No access
Ask a workspace admin for access to this project.
All caught up
No pending reviews are waiting on you right now.
<div class="empty-state-context-example">
  <kui-empty-state
    size="sm"
    context="no-results"
    heading="No results"
    description="Try a different search term or clear your filters."
  >
    <kui-icon kuiEmptyStateIcon name="search" />
  </kui-empty-state>

  <kui-empty-state
    size="sm"
    context="error"
    heading="Couldn't load projects"
    description="Something went wrong while loading this list."
  >
    <kui-icon kuiEmptyStateIcon name="circle-alert" />

    <div kuiEmptyStateActions>
      <button kuiButton shape="soft" type="button">Retry</button>
    </div>
  </kui-empty-state>

  <kui-empty-state
    size="sm"
    context="no-access"
    heading="No access"
    description="Ask a workspace admin for access to this project."
  >
    <kui-icon kuiEmptyStateIcon name="lock" />
  </kui-empty-state>

  <kui-empty-state
    size="sm"
    context="success"
    heading="All caught up"
    description="No pending reviews are waiting on you right now."
  >
    <kui-icon kuiEmptyStateIcon name="circle-check" />
  </kui-empty-state>
</div>

Sizes

size controls overall spacing and icon scale. Small uses a compact horizontal layout for tight regions.

No comments
Be the first to leave a comment.
No comments
Be the first to leave a comment.
No comments
Be the first to leave a comment.
<div class="empty-state-size-example">
  <kui-empty-state size="sm" heading="No comments" description="Be the first to leave a comment.">
    <kui-icon kuiEmptyStateIcon name="message-circle" />
  </kui-empty-state>

  <kui-empty-state size="md" heading="No comments" description="Be the first to leave a comment.">
    <kui-icon kuiEmptyStateIcon name="message-circle" />
  </kui-empty-state>

  <kui-empty-state size="lg" heading="No comments" description="Be the first to leave a comment.">
    <kui-icon kuiEmptyStateIcon name="message-circle" />
  </kui-empty-state>
</div>

API

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

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.

Accessibility

Empty State keeps heading and interaction semantics owned by the surrounding page.

  • The built-in heading is visual text, not a forced heading level. Use the surrounding page structure for heading hierarchy.
  • Decorative icons projected through [kuiEmptyStateIcon] are marked aria-hidden="true" automatically.
  • Add role="status" on the kui-empty-state host when a no-results state appears dynamically after filtering, so assistive technology announces the change.
  • Actions projected through [kuiEmptyStateActions] remain normal interactive elements; use native buttons or links, or Kikita's button directives.