### File

`packages/components/eui-status-badge/eui-status-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 Usage

Example :

    <!-- 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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiSizeS euiSizeM euiSizeVariant
selector | `div[euiStatusBadge], span[euiStatusBadge], eui-status-badge`
template |
    <ng-content />
styleUrl | `./eui-status-badge.scss`

### Index

###### Properties
role
###### Inputs
aria-label colorPalette e2eAttr euiDottedBadge
###### HostBindings
attr.role class
###### Accessors
cssClasses

### Inputs

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

colorPalette
Type : `string`
Extra color palette to be used on the status-badge.

e2eAttr
Type : `string`
Default value : `'eui-status-badge'`

euiDottedBadge
Type : `boolean`
Default value : `false`

### 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

### Properties

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 ""