eui documentation
  1. Components
  2. EuiBadgeComponent

File

packages/components/eui-badge/eui-badge.component.ts

Description

A badge component that can display text, numbers, or icons with various states and styles. Supports content truncation, empty states, and icon-only modes.

Basic badge

Example :
<eui-badge>99</eui-badge>

Badge with semantic variants

Example :
<eui-badge euiSuccess>Active</eui-badge>
<eui-badge euiDanger>Error</eui-badge>

Badge with icon

Example :
<eui-icon-svg icon="eui-email">
  <eui-badge euiDanger euiSizeS>9</eui-badge>
</eui-icon-svg>

Badge with button

Example :
<button euiButton euiPrimary>
  Primary
  <span euiBadge>99</span>
</button>

Badge with truncation

Example :
<eui-badge [maxCharCount]="2" charReplacement="99+">150</eui-badge>

Icon-only badge (dot indicator)

Example :
<eui-badge [euiIconBadge]="true" euiDanger></eui-badge>

Accessibility

  • Uses role="status" for screen reader announcements
  • aria-label provides context (defaults to "badge")
  • Content is automatically announced by screen readers
  • Truncated content shows replacement text to all users
  • Empty badges are visually indicated with special styling

Notes

  • Size variants: euiSizeS, euiSizeM (default)
  • Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger
  • maxCharCount truncates content when exceeded, showing charReplacement (default: "99+")
  • euiIconBadge creates a small dot indicator without text
  • euiDottedBadge applies dotted styling variant
  • Empty badges (no content) automatically receive special styling
  • colorPalette accepts custom color palette names for extended theming
  • euiOutline adds border outline styling
  • Can be used as element (eui-badge) or attribute (div[euiBadge], span[euiBadge])

Implements

AfterViewInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiSizeS euiSizeM euiSizeVariant euiOutline 
selector div[euiBadge], span[euiBadge], eui-badge
imports ObserversModule
templateUrl ./eui-badge.component.html
styleUrl ./eui-badge.scss

Index

Properties
Methods
Inputs
HostBindings
Accessors

Inputs

aria-label
Type : string | null
Default value : 'badge'
charReplacement
Type : string

String to display when content is truncated due to maxCharCount.
colorPalette
Type : string

Extra color palette to be used on the badge. Accepts custom color palette names for extended theming beyond standard variants.
e2eAttr
Type : string
Default value : 'eui-badge'
euiDottedBadge
Type : boolean
Default value : false

Whether to display the badge with dotted styling variant. Applies alternative visual treatment to the badge.
euiIconBadge
Type : boolean
Default value : false

Whether the badge contains only an icon (displays as a small dot indicator). When true, no text content is shown, creating a minimal status indicator.
maxCharCount
Type : number

Maximum number of characters to display before truncating. When content exceeds this limit, it will be replaced with charReplacement value. Useful for displaying large numbers in a compact format (e.g., "99+" for values over 99).

HostBindings

attr.role
Type : string
Default value : 'status'
class
Type : string

Computes and returns the CSS classes for the badge based on its current state

Methods

onContentChanged
onContentChanged()

Handles content changes and triggers content checking

Returns : void

Properties

content
Type : ElementRef
Decorators :
@ViewChild('contentRef')
role
Type : string
Default value : 'status'
Decorators :
@HostBinding('attr.role')

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the badge based on its current state

Returns : string

results matching ""

    No results matching ""