# 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.
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
- Visibility control: Can be shown/hidden via `isVisible` model
- Accessibility: Includes ARIA attributes (role="alert")
- 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>
```

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