packages/components/eui-badge/eui-badge.component.ts
A badge component that can display text, numbers, or icons with various states and styles. Supports content truncation, empty states, and icon-only modes.
AfterViewInit
| changeDetection | ChangeDetectionStrategy.OnPush |
| HostDirectives |
BaseStatesDirective
Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiVariant euiSizeS euiSizeM euiSizeVariant euiOutline
|
| selector | div[euiBadge], span[euiBadge], eui-badge |
| imports |
ObserversModule
|
| templateUrl | ./eui-badge.component.html |
| styleUrl | ./eui-badge.scss |
Properties |
Methods |
Inputs |
HostBindings |
Accessors |
| aria-label |
Type : string | null
|
Default value : 'badge'
|
| charReplacement |
Type : string
|
| e2eAttr |
Type : string
|
Default value : 'eui-badge'
|
| euiDottedBadge |
Type : boolean
|
Default value : false
|
| euiIconBadge |
Type : boolean
|
Default value : false
|
| maxCharCount |
Type : number
|
| attr.role |
Type : string
|
Default value : 'status'
|
| class |
Type : string
|
| onContentChanged |
onContentChanged()
|
|
Handles content changes and triggers content checking
Returns :
void
|
| content |
Type : ElementRef
|
Decorators :
@ViewChild('contentRef')
|
| role |
Type : string
|
Default value : 'status'
|
Decorators :
@HostBinding('attr.role')
|
| cssClasses |
getcssClasses()
|
|
Computes and returns the CSS classes for the badge based on its current state
Returns :
string
|