### File

`packages/components/eui-icon-state/eui-icon-state.component.ts`

### Description

Displays an icon with semantic state styling (primary, success, info, warning, danger). Combines icon rendering with state-based color variants for status indicators, alerts, and contextual UI elements. Inherits state inputs from BaseStatesDirective for consistent theming across the application.

### Success state icon

Example :

    <eui-icon-state
      euiSuccess
      size="m"
      ariaLabel="Success">
    </eui-icon-state>

### Warning indicator

Example :

    <eui-icon-state
      euiWarning
      size="l"
      ariaLabel="Warning: Action required">
    </eui-icon-state>

### Accessibility

- Always provide descriptive `ariaLabel` for meaningful icons
- Color is not the only indicator (icon shape also conveys meaning)
- Sufficient contrast maintained in all state variants

### Notes

- State variants: euiPrimary, euiSuccess, euiInfo, euiWarning, euiDanger
- Icon automatically matches the state color
- Use in feedback messages, form validation, and status displays
- Combine with text labels for clarity

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSuccess euiInfo euiWarning euiDanger euiVariant
host | `{ }`
selector | `eui-icon-state`
imports | `EUI_ICON`
templateUrl | `./eui-icon-state.component.html`
styleUrl | `./eui-icon-state.component.scss`

### Index

###### Properties

- Readonly baseStatesDirective
- cssClasses
- Readonly icon

###### Inputs

- ariaLabel
- size

### Inputs

ariaLabel
Type : `string`
Default value : `undefined`
Accessible label for screen readers describing the icon's purpose or meaning. Required for accessibility when the icon conveys semantic information.

size
Type : `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"`
Default value : `'m'`
Controls the rendered size of the icon.

### Properties

Readonly baseStatesDirective
Type : `unknown`
Default value : `inject(BaseStatesDirective)`

cssClasses
Type : `unknown`
Default value : `computed(() => this.baseStatesDirective.getCssClasses('eui-icon-state'))`

Readonly icon
Type : `unknown`
Default value : `computed(() => { const state = this.baseStatesDirective.euiVariantState(); // if the state does not match any of the host-directive input you should fallback to primary // (coming from Logic of ROMEO DAVID) const v = state && ['primary', 'success', 'info', 'warning', 'danger'].includes(state) ? state : 'primary'; return v ? `eui-state-${v}` : null; })`

# results matching ""

# No results matching ""