eui documentation
  1. Components
  2. EuiIconStateComponent

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
Inputs
HostBindings
Accessors

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
getcssClasses()

results matching ""

    No results matching ""