Back to components

Badge

zyra-badge
StatusZyraBadge

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
Badge
Generated Code
<zyr-badge
  variant="success"
>
  Badge
</zyr-badge>
All Variants
success
successsuccesssuccess
successsuccesssuccess
warning
warningwarningwarning
warningwarningwarning
danger
dangerdangerdanger
dangerdangerdanger
info
infoinfoinfo
infoinfoinfo
purple
purplepurplepurple
purplepurplepurple
default
defaultdefaultdefault
defaultdefaultdefault
Sizes Comparison
lgmdsm
lgmdsm
lgmdsm
lgmdsm
lgmdsm
lgmdsm
Dot Indicator
OnlineOfflineAwayBusyCustomUnknown
Real World Examples
Status Indicators
Order StatusDelivered
PaymentPending
AccountSuspended
ServerMaintenance
Version Tags
v1.0.0betadeprecatednewexperimentalstable
Notification Counts
Messages12
Alerts3
Updates99+
Warnings7
Component Labels
ZyraButton
stablesignals
ZyraTable
beta
ZyraDatePicker
coming soon
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