# EuiBadgeComponent

**Type:** component



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
```html
<eui-badge>99</eui-badge>
```

#### Badge with semantic variants
```html
<eui-badge euiSuccess>Active</eui-badge>
<eui-badge euiDanger>Error</eui-badge>
```

#### Badge with icon
```html
<eui-icon-svg icon="eui-email">
  <eui-badge euiDanger euiSizeS>9</eui-badge>
</eui-icon-svg>
```

#### Badge with button
```html
<button euiButton euiPrimary>
  Primary
  <span euiBadge>99</span>
</button>
```

#### Badge with truncation
```html
<eui-badge [maxCharCount]="2" charReplacement="99+">150</eui-badge>
```

#### Icon-only badge (dot indicator)
```html
<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])


**Selector:** `div[euiBadge], span[euiBadge], eui-badge`

## Inputs
- **aria-label**: `string | null` - 
- **charReplacement**: `string` - String to display when content is truncated due to maxCharCount.
- **colorPalette**: `string` - Extra color palette to be used on the badge. Accepts custom color palette names for extended theming beyond standard variants.
- **e2eAttr**: `string` - 
- **euiDottedBadge**: `boolean` - Whether to display the badge with dotted styling variant. Applies alternative visual treatment to the badge.
- **euiIconBadge**: `boolean` - 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**: `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).
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **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]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiOutline**: `any` - From host directive: #[[file:BaseStatesDirective.md]]