eui documentation
  1. Components
  2. EuiStatusBadgeComponent

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
Inputs
HostBindings
Accessors

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
getcssClasses()

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

Returns : string

results matching ""

    No results matching ""