# EuiGrowlComponent

**Type:** component



Notification component that displays temporary or persistent messages to users.
Supports multiple message types (success, info, warning, error) with automatic dismissal or sticky behavior.
Messages can be positioned in different screen locations and include customizable lifecycle durations.
Implements ARIA live regions for accessibility, announcing messages to screen readers.
Commonly used for user feedback, system notifications, and operation status updates.

### Basic growl notification
```typescript
messages: EuiGrowlMessage[] = [];

showSuccess() {
  this.messages.push({
    severity: 'success',
    summary: 'Success',
    detail: 'Operation completed'
  });
}
```
```html
<eui-growl [value]="messages" position="top-right"></eui-growl>
```

### Sticky notification
```typescript
this.messages.push({
  severity: 'info',
  summary: 'Info',
  detail: 'This message stays until dismissed',
  sticky: true
});
```

### Accessibility
- Uses ARIA live regions (aria-live="polite") for screen reader announcements
- Messages are announced without interrupting user workflow
- Close buttons are keyboard accessible

### Notes
- Position options: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
- Non-sticky messages auto-dismiss after `life` milliseconds (default: 3000)
- Use `closeAllSticky` to show a clear-all button for multiple sticky messages


**Selector:** `eui-growl`

## Inputs
- **ariaLive**: `"off" | "polite" | "assertive"` - ARIA live region politeness level controlling how screen readers announce messages. 'polite' waits for user to finish current activity, 'assertive' interrupts immediately, 'off' disables announcements.
- **callback**: `function` - Optional callback function executed when a growl message is clicked. Allows custom behavior to be triggered on user interaction with notifications.
- **closeAllSticky**: `boolean` - Enables display of a close-all button when multiple sticky messages are present. Provides users with a quick way to dismiss all persistent notifications at once.
- **e2eAttr**: `string` - Data attribute used for end-to-end testing identification.
- **life**: `number` - Duration in milliseconds before non-sticky messages automatically dismiss. Individual messages can override this with their own life property.
- **position**: `string` - Screen position where growl messages appear. Common values include 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'. Affects the CSS positioning of the notification container.
- **sticky**: `boolean` - Prevents automatic dismissal of messages, requiring manual user interaction to close. When true, messages remain visible until explicitly closed by the user.
- **value**: `EuiGrowlMessage[]` - Array of message objects to display in the growl notification area. Each message should conform to the EuiGrowlMessage interface with properties like severity, summary, and detail. Messages are automatically managed with lifecycle timeouts based on sticky and life properties.

## Outputs
- **growlClick**: `EventEmitter<void>` - Emitted when a growl message is clicked by the user. No payload is provided. Triggers in addition to the callback function if one is defined.
- **growlClose**: `EventEmitter<void>` - Emitted when a growl message is closed, either automatically or by user action. No payload is provided. Useful for tracking message dismissals or triggering cleanup operations.