### 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

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

### Index

###### Properties

- baseStatesDirective

###### Inputs

- ariaLabel
- size

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

ariaLabel
Type : `string`
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.

### HostBindings

class
Type : `string`

### Properties

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

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""