# Error State Use `ui-error-state` for failed loads, missing resources, permission blocks, and similar broken flows where the user needs both context and a next step. The copy should explain the problem in human terms, not just restate a technical failure. ## Import ```ts import { ErrorStateComponent, type QuickAction } from 'ui'; ``` ## Basic error messaging ```ts import { Component } from '@angular/core'; import { ErrorStateComponent } from 'ui'; @Component({ selector: 'app-error-state-basic-demo', standalone: true, imports: [ErrorStateComponent], template: `
`, }) export class ErrorStateBasicDemoComponent {} ``` ## Icons and sizes ```ts import { Component } from '@angular/core'; import { ErrorStateComponent } from 'ui'; @Component({ selector: 'app-error-state-icons-sizes-demo', standalone: true, imports: [ErrorStateComponent], template: `

Small

Medium

Large

`, }) export class ErrorStateIconsSizesDemoComponent {} ``` ## Recovery actions ```ts import { Component, signal } from '@angular/core'; import { ErrorStateComponent, type QuickAction } from 'ui'; @Component({ selector: 'app-error-state-actions-demo', standalone: true, imports: [ErrorStateComponent], template: `

Last action

{{ lastAction() || 'No action yet.' }}
`, }) export class ErrorStateActionsDemoComponent { protected readonly lastAction = signal(''); protected readonly retryAction: QuickAction = { label: 'Try again', variant: 'primary', icon: 'arrow_sync', action: () => this.lastAction.set('Try again'), }; protected readonly supportAction: QuickAction = { label: 'Contact support', variant: 'secondary', icon: 'person_support', action: () => this.lastAction.set('Contact support'), }; } ``` ## Custom projected guidance ```ts import { Component } from '@angular/core'; import { ButtonComponent, ErrorStateComponent } from 'ui'; @Component({ selector: 'app-error-state-custom-content-demo', standalone: true, imports: [ButtonComponent, ErrorStateComponent], template: `
We found problems in your submission:
Email address is required
Password must be at least 8 characters
Phone number format is invalid
Review form
`, }) export class ErrorStateCustomContentDemoComponent {} ``` ## Common error scenarios ```ts import { Component } from '@angular/core'; import { ErrorStateComponent } from 'ui'; @Component({ selector: 'app-error-state-scenarios-demo', standalone: true, imports: [ErrorStateComponent], template: `

Network

Permissions

Missing resource

`, }) export class ErrorStateScenariosDemoComponent {} ``` ## Embedded panel or view layout ```ts import { Component } from '@angular/core'; import { ButtonComponent, ErrorStateComponent, TextComponent } from 'ui'; @Component({ selector: 'app-error-state-panel-layout-demo', standalone: true, imports: [ButtonComponent, ErrorStateComponent, TextComponent], template: `
Filter
`, }) export class ErrorStatePanelLayoutDemoComponent {} ``` ## Accessibility ### Clear problem statement An error state should clearly describe what failed and, when possible, what the user can do next. Avoid vague titles that communicate only that 'something happened.' ### Recovery actions If actions are present, they should offer meaningful recovery rather than decorative options. | Element | Guidance | | --- | --- | | Primary action | Use for the most direct recovery path, such as retrying. | | Secondary action | Use for alternate paths such as contacting support or going elsewhere. | | Custom projected controls | Keep them simple and semantically clear. | ### Icons and supporting content Icons and custom projected details should reinforce the error message, not replace it. The main title and description must still communicate the state clearly on their own.