Back to componentszyra-badge
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
Generated Code
<zyra-badge
variant="success"
>
Badge
</zyra-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
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
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.
defaultNeutral label for metadata and categories
infoBlue tint for informational status
successGreen for live, active, or passing states
warningAmber for cautionary or degraded states
dangerRed for errors, failures, or critical counts
API
All inputs and configuration options for zyra-badge.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'default' | Color and semantic meaning |
size | 'sm' | 'md' | 'md' | Physical size of the badge |
dot | boolean | false | Shows 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