Back to components

Badge

zyra-badge

Small status labels for updates, counts, state pills, and quick metadata throughout the interface.

Component preview

Explore the available states and the real library behavior for this component.

zyra-badge Playground

Control every input live and see the result instantly

Controls
size
label text
boolean inputs
variant
Preview
Badge
Generated Code
<zyra-badge
  variant="success"
>
  Badge
</zyra-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

Copy-paste example

Drop this into your Angular standalone component and it works out of the box.

badge.demo.ts
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 {}

Variants

All the visual modes and states available for this component.

default

Neutral label for metadata and categories

info

Blue tint for informational status

success

Green for live, active, or passing states

warning

Amber for cautionary or degraded states

danger

Red for errors, failures, or critical counts

API

All inputs and configuration options for zyra-badge.

PropTypeDefaultDescription
variant'default' | 'info' | 'success' | 'warning' | 'danger''default'Color and semantic meaning
size'sm' | 'md''md'Physical size of the badge
dotbooleanfalseShows a live-indicator dot before the label

Accessibility

Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.

  • Presentational by default - no role is needed unless used as a live indicator
  • When used for live counts (e.g. notifications), add aria-live="polite" to the parent
  • Dot mode does not convey meaning through color alone; pair with visible text