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

- alertTitle
- baseStatesDirective
- role

###### Methods

- onCloseClick

###### Inputs

- e2eAttr
- isCloseable
- isFocusable
- isVisible

###### Outputs

- closeAlert
- isVisible

###### HostBindings

- attr.aria-describedby
- attr.data-e2e
- attr.role
- attr.tabindex
- class

###### Accessors

- cssClasses
- ariaDescribedBy
- tabindex
- e2eAttribute

### 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
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

ariaDescribedBy
get `ariaDescribedBy()`
Sets the `aria-describedby` attribute for the host element. Returns : `string`

tabindex
get `tabindex()`
Sets the `tabindex` attribute for the host element. Returns : `string`

e2eAttribute
get `e2eAttribute()`
Sets the `data-e2e` attribute for the host element. It is used for end-to-end testing. Returns : `string`

# results matching ""

# No results matching ""