eui documentation
  1. Components
  2. EuiAlertComponent

File

packages/components/eui-alert/eui-alert.component.ts

Description

Alert component for displaying short, important messages that attract user attention without interrupting tasks. Provides semantic variants (success, info, warning, danger) with corresponding visual styling and icons. Supports optional title section, close button, and keyboard focus for accessibility. Visibility can be controlled programmatically or by user dismissal via close button. Includes ARIA attributes for screen reader support and unique ID generation for content association.

  • Supports four semantic variants: success, info, warning, and danger (via BaseStatesDirective)

  • Optional title section via <eui-alert-title> content projection

  • Main content area for alert message (projected via ng-content)

  • Optional close button when isCloseable is true

  • Icon state indicator matching the alert variant

  • Closeable: Can be dismissed by user via close button

  • Focusable: Can receive keyboard focus for accessibility

  • Visibility control: Can be shown/hidden via isVisible model

  • Accessibility: Includes ARIA attributes (role="alert", aria-describedby)

  • Unique ID generation for content association

Basic alert (defaults to info variant)

Example :
<eui-alert>
  Important message for the user
</eui-alert>

Alert with title and variant

Example :
<eui-alert euiSuccess>
  <eui-alert-title>Success</eui-alert-title>
  Your changes have been saved successfully.
</eui-alert>

Closeable alert with visibility control

Example :
<eui-alert euiWarning [isCloseable]="true" [(isVisible)]="showAlert" (closeAlert)="onClose()">
  This is a dismissible warning message.
</eui-alert>

Focusable alert for keyboard navigation

Example :
<eui-alert euiDanger [isFocusable]="true">
  Critical error that requires attention.
</eui-alert>

Accessibility

  • Uses role="alert" for immediate screen reader announcement of important messages
  • aria-describedby links alert to its content for proper association
  • Keyboard focusable when isFocusable is true (tabindex="0")
  • Close button is keyboard accessible with Enter/Space keys
  • Semantic variants provide visual and contextual meaning for all users
  • Icon state indicators supplement color for users with color vision deficiencies

Notes

  • Defaults to info variant if no variant is specified
  • isVisible is a two-way bindable model for programmatic control
  • closeAlert event emits false when alert is dismissed
  • Alert remains in DOM when hidden (display: none), use *ngIf for removal
  • Use sparingly to avoid alert fatigue - reserve for truly important messages
  • Consider toast notifications for less critical, temporary messages

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives BaseStatesDirective
 Inputs : euiSuccess euiInfo euiWarning euiDanger euiVariant 
selector div[euiAlert], eui-alert
imports NgTemplateOutlet EUI_ICON_BUTTON EUI_ICON_STATE
templateUrl ./eui-alert.component.html
styleUrl ./eui-alert.scss

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

e2eAttr
Default value : 'eui-alert'

Data attribute value for end-to-end testing identification. Applied as data-e2e attribute on the host element.
isCloseable
Default value : false, { transform: booleanAttribute }

Enables a close button allowing users to dismiss the alert. When true, displays a close icon button that hides the alert and emits closeAlert event.
isFocusable
Default value : false, { transform: booleanAttribute }

Makes the alert focusable via keyboard navigation. When true, sets tabindex to 0 enabling keyboard focus for accessibility.
isVisible
Default value : true

Controls the visibility state of the alert. Two-way bindable model that can be programmatically controlled or updated by user dismissal.

Outputs

closeAlert
Type : boolean

Emitted when the alert is closed via the close button. Payload: boolean - always emits false to indicate alert is hidden Triggered when user clicks the close button (when isCloseable is true).
isVisible

Controls the visibility state of the alert. Two-way bindable model that can be programmatically controlled or updated by user dismissal.

HostBindings

attr.aria-describedby
Type : string

Sets the aria-describedby attribute for the host element.
attr.data-e2e
Type : string

Sets the data-e2e attribute for the host element. It is used for end-to-end testing.
attr.role
Type : string
Default value : 'alert'

Sets the role attribute for the host element.
attr.tabindex
Type : string

Sets the tabindex attribute for the host element.
class
Type : string

Computes and returns the CSS classes for the component based on its current state.

Methods

onCloseClick
onCloseClick()

Hide the alert and emits the closeAlert event when the close button is clicked.

Returns : void

Properties

alertTitle
Type : QueryList<EuiAlertTitleComponent>
Decorators :
@ContentChild(undefined, {static: false})

Content for the alert title given by <eui-alert-title>.
baseStatesDirective
Type : unknown
Default value : inject(BaseStatesDirective)
role
Type : string
Default value : 'alert'
Decorators :
@HostBinding('attr.role')

Sets the role attribute for the host element.

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string
ariaDescribedBy
getariaDescribedBy()

Sets the aria-describedby attribute for the host element.

Returns : string
tabindex
gettabindex()

Sets the tabindex attribute for the host element.

Returns : string
e2eAttribute
gete2eAttribute()

Sets the data-e2e attribute for the host element. It is used for end-to-end testing.

Returns : string

results matching ""

    No results matching ""