Level: molecule.
Purpose and use
Explain why a content region has no records and offer a relevant next action. Use a loader for pending data; empty content is not evidence of a request failure.
Anatomy, behavior, and accessibility
- Empty/status variants contain optional icon, title, caption and a secondary action with a plus icon. Status chooses a danger/warning/success illustration.
- Compact shows
compactTextonly. Filter-result shows the enabled title/caption inline, without icon or action, regardless of showIcon/showAction. - Action emits
actionClick; the parent supplies the outcome. The graphic is decorative. State the missing entity and what the user can do in text; replace the default bracketed instructional placeholders before use.
Open Questions
The section has no live-region semantics or busy/error lifecycle. Announcing a newly empty result set must be decided by the enclosing screen.
Local component contract
This is the active owned contract for component.empty-state. The API below
is verified against the current local implementation, focused test and story.
The Source commit 0112cba0779a2d2a4b6c7a17243201694344d70a remains
migration provenance, not the runtime owner.
Classes and selectors
WblEmptyStateComponent—wbl-empty-state(src/app/design-system/patterns/empty-state/empty-state.component.ts).
Inputs
WblEmptyStateComponent.variant = input<WblEmptyStateVariant>('empty')WblEmptyStateComponent.iconName = input<WblIconName>('empty-state')WblEmptyStateComponent.statusIcon = input<WblEmptyStateStatusIcon>('danger')WblEmptyStateComponent.title = input('[Существительное] пока нет')WblEmptyStateComponent.caption = input('Чтобы [действие], нажмите на кнопку вверху страницы «Название кнопки»')WblEmptyStateComponent.compactText = input('Ничего не найдено')WblEmptyStateComponent.actionLabel = input('Текст')WblEmptyStateComponent.showIcon = input(true)WblEmptyStateComponent.showTitle = input(true)WblEmptyStateComponent.showCaption = input(true)WblEmptyStateComponent.showAction = input(true)
Public types and allowed values
type WblEmptyStateVariant = 'empty' | 'status' | 'compact' | 'filter-result';
type WblEmptyStateStatusIcon = 'danger' | 'warning' | 'success';
Icon-name inputs use WblIconName from the shared icon contract;
choose a key present in the owned icon pack, not an arbitrary external icon name.
Models
- None.
Outputs
WblEmptyStateComponent.actionClick = output<void>()
Slots and projection markers
- The exact template has no Angular content-projection slot.
Local evidence
- Code:
src/app/design-system/patterns/empty-state/empty-state.component.ts. - Focused test:
src/app/design-system/patterns/empty-state/empty-state.component.spec.ts. - Public export:
export * from './patterns/empty-state/empty-state.component';insrc/app/design-system/index.ts. - Storybook:
storybook/stories/empty-state.stories.ts(Design System/Patterns/wbl-empty-state).
Figma status
This runtime contract does not infer a Figma owner. Assembly evidence, when verified, is maintained separately through the inventory-linked sidecar.
Provenance
The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.