Back to componentszyra-badge
Badge
Component preview
Explore the available states and the real library behavior for this component.
Live previewZyraBadge
zyra-badge Playground
Control every input live and see the result instantly
Controls
variant
size
label text
boolean inputs
Preview
Generated Code
<zyr-badge
variant="success"
>
Badge
</zyr-badge>All Variants
success
warning
danger
info
purple
default
Sizes Comparison
Dot Indicator
Real World Examples
Status Indicators
Order StatusDelivered
PaymentPending
AccountSuspended
ServerMaintenance
Version Tags
Notification Counts
Messages12
Alerts3
Updates99+
Warnings7
Component Labels
ZyraButton
ZyraTable
ZyraDatePicker
Usage code
zyra-badge
import { Component } from '@angular/core';
import { ZyraBadge } from 'zyra-ng-ui';
@Component({
selector: 'app-demo-badge',
standalone: true,
imports: [ZyraBadge],
template: `
<zyra-badge variant="success" size="md" [dot]="true">
Active
</zyra-badge>
`,
})
export class DemoBadgeComponent {}
Compact semantic statesDot support for live signalsFits dense UI surfaces