# Badge
Use badge for short status, count, or category metadata that should stay lightweight. It is best for labels like draft, live, unread, or 99+. For anything clickable or dismissible, use tag or button instead.
## Import
```ts
import { BadgeComponent } from 'ui';
```
## Status and metadata
```ts
import { Component } from '@angular/core';
import { BadgeComponent } from 'ui';
@Component({
selector: 'app-badge-basic-demo',
standalone: true,
imports: [BadgeComponent],
template: `
Release checklistBadge should summarize state without needing a sentence.
`,
})
export class BadgeBasicDemoComponent {}
```
## Appearance and variant
```ts
import { Component } from '@angular/core';
import { BadgeComponent } from 'ui';
@Component({
selector: 'app-badge-appearance-variant-demo',
standalone: true,
imports: [BadgeComponent],
template: `
`,
})
export class BadgeAppearanceVariantDemoComponent {}
```
## Size and shape
```ts
import { Component } from '@angular/core';
import { BadgeComponent } from 'ui';
@Component({
selector: 'app-badge-size-shape-demo',
standalone: true,
imports: [BadgeComponent],
template: `
`,
})
export class BadgeSizeShapeDemoComponent {}
```
## Icons and position
```ts
import { Component } from '@angular/core';
import { BadgeComponent } from 'ui';
@Component({
selector: 'app-badge-icons-demo',
standalone: true,
imports: [BadgeComponent],
template: `
`,
})
export class BadgeIconsDemoComponent {}
```
## Counts and overflow labels
```ts
import { Component } from '@angular/core';
import { BadgeComponent } from 'ui';
@Component({
selector: 'app-badge-counts-demo',
standalone: true,
imports: [BadgeComponent],
template: `
InboxCompact count badges fit best when the number is the only thing that matters.
Quarterly planning reviewUse grouped badges to show ownership, risk, and freshness without building custom
metadata chrome.
`,
})
export class BadgeCompositionDemoComponent {}
```
## Accessibility
### Accessible name
`BadgeComponent` uses the visible `text` as its default accessible name. Set `ariaLabel` when the badge text is abbreviated, numeric, or otherwise not descriptive enough on its own, such as `99+` or `3`.
### Semantics
The host renders with `role="status"`. This is appropriate for short status metadata, but badge itself is not interactive and is not keyboard focusable. If users must click, dismiss, or toggle it, use a more suitable component such as `TagComponent` or `ButtonComponent`.
| Aspect | Behavior |
| --- | --- |
| Role | `status` |
| Focus | not focusable |
| Name source | `ariaLabel` or visible `text` |
| Interaction | none; display-only surface |