### 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
content role
###### Methods
onContentChanged
###### Inputs
aria-label charReplacement colorPalette e2eAttr euiDottedBadge euiIconBadge maxCharCount
###### HostBindings
attr.role class
###### Accessors
cssClasses

### 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
get `cssClasses()`
Computes and returns the CSS classes for the badge based on its current state Returns : `string`

# results matching ""

# No results matching ""