# EuiStatusBadgeComponent

**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 Usage
```html
<!-- Status badge with semantic colors -->
<span euiStatusBadge euiSuccess>Active</span>
<span euiStatusBadge euiWarning>Pending</span>
<span euiStatusBadge euiDanger>Error</span>

<!-- Dotted badge -->
<span euiStatusBadge euiInfo [euiDottedBadge]="true">New</span>

<!-- Custom color palette -->
<span euiStatusBadge [colorPalette]="'custom-color'">Custom</span>
```

### Accessibility
- Badge has role="status" for screen readers
- Provide meaningful aria-label describing the status
- Ensure sufficient color contrast for text visibility

### Notes
- Use semantic color variants (euiSuccess, euiWarning, euiDanger, euiInfo) for consistent meaning
- Size variants (euiSizeS, euiSizeM) control badge dimensions
- Dotted badge mode displays a small dot indicator instead of full badge


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

## Inputs
- **aria-label**: `string | null` - 
- **colorPalette**: `string` - Extra color palette to be used on the status-badge.
- **e2eAttr**: `string` - 
- **euiDottedBadge**: `boolean` - 
- **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]]