generated:catalog.entry.badge.title
generated:catalog.entry.badge.description
@xngui/components/badge@xngui/components/badgechrome:demo.section
chrome:demo.preview
import { Component } from '@angular/core';
import { XBadge } from '@xngui/components/badge';
@Component({
selector: 'app-example',
imports: [XBadge],
templateUrl: './badge.component.html',
})
export class ExampleComponent {}
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-badge
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
sizeXSize—Visual size tier — falls back to XConfigService when unset.
densityXDensity—Spacing offsets — falls back to XConfigService when unset.
variantXVariant—Semantic color role for the badge surface — falls back to XConfigService when unset.
appearanceXAppearance—Fill style — falls back to XConfigService when unset.
labelstring—Pill text — omit or leave empty for dot mode when `dot` is unset.
dotboolean—Force dot mode (`true`) or pill shell (`false`) — auto when unset from `label`.
ariaLabelstring—Accessible name when the badge renders as a dot.
pulsebooleanfalseApplies a pulsing animation on the dot or label surface.