# EuiAlertComponent

**Type:** component



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)
```html
<eui-alert>
  Important message for the user
</eui-alert>
```

#### Alert with title and variant
```html
<eui-alert euiSuccess>
  <eui-alert-title>Success</eui-alert-title>
  Your changes have been saved successfully.
</eui-alert>
```

#### Closeable alert with visibility control
```html
<eui-alert euiWarning [isCloseable]="true" [(isVisible)]="showAlert" (closeAlert)="onClose()">
  This is a dismissible warning message.
</eui-alert>
```

#### Focusable alert for keyboard navigation
```html
<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


**Selector:** `div[euiAlert], eui-alert`

## Inputs
- **e2eAttr**: `undefined` - Data attribute value for end-to-end testing identification. Applied as data-e2e attribute on the host element.
- **isCloseable**: `undefined` - 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**: `undefined` - Makes the alert focusable via keyboard navigation. When true, sets tabindex to 0 enabling keyboard focus for accessibility.
- **isVisible**: `undefined` - Controls the visibility state of the alert. Two-way bindable model that can be programmatically controlled or updated by user dismissal.
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **closeAlert**: `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**: `undefined` - Controls the visibility state of the alert. Two-way bindable model that can be programmatically controlled or updated by user dismissal.