eui documentation
  1. Components
  2. EuiAlertTitleComponent

File

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

Description

Title subcomponent for eui-alert that displays a prominent heading above the alert message. Provides semantic structure and visual hierarchy within alert messages. Content is projected via ng-content, allowing text or inline elements as title content. Automatically styled to match the parent alert's variant and visual design. Must be used as a direct child of eui-alert component for proper styling and structure.

Alert with title

Example :
<eui-alert euiSuccess>
  <eui-alert-title>Success</eui-alert-title>
  Your operation completed successfully.
</eui-alert>

Alert with title and multiple variants

Example :
<eui-alert euiWarning>
  <eui-alert-title>Warning</eui-alert-title>
  Please review the following issues before proceeding.
</eui-alert>

Accessibility

  • Provides semantic structure that helps screen readers distinguish title from content
  • Title is announced first, giving context before the main message
  • Visual hierarchy aids users with cognitive disabilities in understanding message importance

Notes

  • Must be used within eui-alert component
  • Should be placed before the main alert content
  • Only one title per alert is recommended for clarity
  • Title styling automatically inherits from parent alert variant
  • Keep titles concise - typically 1-3 words for quick comprehension

Metadata

selector eui-alert-title
template 
<ng-content />
styleUrl eui-alert-title.scss

Index

Properties
HostBindings

HostBindings

class
Type : string
Default value : 'eui-alert-title'

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

Properties

class
Type : string
Default value : 'eui-alert-title'
Decorators :
@HostBinding('class')

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

results matching ""

    No results matching ""