Empty State
Displays a non-blocking no-data, no-results, error, no-access, or success state inside a known UI region.
Import the public component and slot directives from the package entrypoint.
import {
KuiButton,
KuiEmptyStateActions,
KuiEmptyState,
KuiEmptyStateIcon,
} from '@kikita-labs/ui';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>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>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>heading is optional: omit it when the supporting description is enough, for example in a small filtered list.
No results match the current filters.
<kui-empty-state size="sm" description="No results match the current filters." />Set defaults.emptyState once for the application or for a subtree. Each option resolves as local input > defaults.emptyState.<option> > built-in default.
import { provideKikitaUi } from '@kikita-labs/ui';
export const appConfig: ApplicationConfig = {
providers: [
provideKikitaUi({
defaults: {
emptyState: {
/* options below */
},
},
}),
],
};| Name | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | — | Component size. Takes precedence over the global defaults.size. |
Set any of these on the component or an ancestor to restyle one part. Each token is optional: when it is not set, the part uses the role or scale token in the default column.
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-empty-icon-color-error | CSS custom property | --kui-color-danger-text | Icon color, error |
| --kui-empty-icon-color-success | CSS custom property | --kui-color-success-text | Icon color, success |
| --kui-empty-icon-color-no-access | CSS custom property | --kui-color-warning-text | Icon color, no access |
| Name | Type | Default | Description |
|---|---|---|---|
| --kui-empty-title-font-size-sm | CSS custom property | --kui-text-sm-size | Title font size, sm |
| --kui-empty-description-font-size-sm | CSS custom property | --kui-text-xs-size | Description font size, sm |
| --kui-empty-title-font-size-lg | CSS custom property | --kui-text-lg-size | Title font size, lg |
Inputs verified against @kikita-labs/ui v2.0.0 v2.0.0 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| heading | string | undefined | - | Optional empty-state heading text; omit it for a description-only state. Visual text only, not a forced heading level. |
| description | string | null | null | Optional 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. Falls back to defaults.emptyState.size, then the global defaults.size. |
| [kuiEmptyStateIcon] | KuiEmptyStateIcon | - | Marks projected visual content as the decorative icon slot. Kikita marks it aria-hidden. |
| [kuiEmptyStateActions] | KuiEmptyStateActions | - | Marks projected content as the action slot for native buttons, links, or Kikita button directives. |
| KuiEmptyStateOptions | interface | - | Shape of defaults.emptyState: size. |
Empty State keeps heading and interaction semantics owned by the surrounding page.
- The built-in
headingis visual text, not a forced heading level. Use the surrounding page structure for heading hierarchy. - Decorative icons projected through
[kuiEmptyStateIcon]are markedaria-hidden="true"automatically. - Add
role="status"on thekui-empty-statehost 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.
Consumer-visible changes of @kikita-labs/ui 2.0 for Empty State.
- The classes are
KuiEmptyState,KuiEmptyStateIconandKuiEmptyStateActions(they had aComponentorDirectivesuffix);ng update @kikita-labs/uirenames the imports. headingis optional now, and the default size comes fromdefaults.emptyState.size.- The title weight is semibold (600, it was 650), body text uses the shared line heights, and the error, success and no-access icon colors are tokens.