import { Component } from '@angular/core';
import { WrBadge, WrTag } from 'ngwr/badge';
@Component({ imports: [WrBadge, WrTag] })
export class MyComponent {}Badge
A small label for a count or a status.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
<wr-badge>New</wr-badge>Colors
<wr-badge color="primary">Primary</wr-badge>
<wr-badge color="success">Success</wr-badge>Sizes
<wr-badge size="sm">12</wr-badge>
<wr-badge size="md">12</wr-badge>
<wr-badge size="lg">12</wr-badge>Shape
shape is rounded (default), pill or squircle.
<wr-badge color="primary">Beta</wr-badge>
<wr-badge color="primary" shape="pill">Beta</wr-badge>
<wr-badge color="primary" shape="squircle">Beta</wr-badge>Outlined
outlined drops the fill and keeps a coloured ring.
<wr-badge color="primary" outlined>Beta</wr-badge>Tag
<wr-tag>, also from ngwr/badge, adds icon, loading and transparent.
<wr-tag color="success" icon="checkmark">Done</wr-tag>
<wr-tag color="primary" outlined rounded>Beta</wr-tag>
<wr-tag color="warning" loading>Saving</wr-tag>Colour is not a label
Write the state in the label (Failed, not a red Build), and give a status tag an icon you register.
import { CircleCheck, OctagonAlert } from 'lucide';
import { lucideIcons, provideWrIcons } from 'ngwr/icon';
@Component({
providers: [provideWrIcons(lucideIcons({ 'circle-check': CircleCheck, 'octagon-alert': OctagonAlert }))],
})
export class BuildStatus {}<wr-tag color="success" icon="circle-check">Passed</wr-tag>
<wr-tag color="danger" icon="octagon-alert">Failed</wr-tag>
<wr-badge color="warning">Degraded</wr-badge>API
Inputs of <wr-badge>.
| Name | Description | Type | Default |
|---|---|---|---|
color | Color variant. Maps to --wr-color-* CSS variables from the theme. It is decoration or category, never the state on its own: four of the five intents share one lightness and success against danger is 1.004:1, so the label has to say the state (Offline, not a red Status). A badge draws no icon — when a chip must stand for a status without words, use <wr-tag> with its icon input. | WrColor | null | 'primary' |
size | Size variant. | WrBadgeSize | 'md' |
shape | Corner treatment. Mirrors <wr-btn> — rounded (default) uses the small form-radius; pill rounds the ends fully. | WrBadgeShape | 'rounded' |
outlined | Outlined style — transparent fill, colored border and text. | boolean | false |
Tag API
Inputs of <wr-tag>.
| Name | Description | Type | Default |
|---|---|---|---|
color | Intent colour. null is neutral gray. | WrColor | null | 'primary' |
icon | Icon beside the label. | WrIconName | null | null |
iconPosition | Which side the icon sits on. | 'start' | 'end' | 'start' |
outlined | Coloured text and ring on a light tint. | boolean | false |
transparent | Coloured text on a low-opacity tint, no border. | boolean | false |
rounded | Pill radius instead of the default. | boolean | false |
hoverable | Add a hover affordance. | boolean | false |
loading | Swap the icon for a spinner. | boolean | false |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/badge's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-badge-bg | var(--wr-color-fill) | .wr-badge +2 variant overrides |
--wr-badge-border | var(--wr-border-base) | .wr-badge +1 variant override |
--wr-badge-color | var(--wr-color-on-surface) | .wr-badge +2 variant overrides |
--wr-badge-font-size | var(--wr-text-xs) | .wr-badge +2 variant overrides |
--wr-badge-font-weight | 600 | .wr-badge |
--wr-badge-min-height | 1.5rem | .wr-badge +2 variant overrides |
--wr-badge-padding-x | var(--wr-space-sm) | .wr-badge +3 variant overrides |
--wr-badge-padding-y | var(--wr-space-xs) | .wr-badge +2 variant overrides |
--wr-badge-radius | var(--wr-border-radius-sm) | .wr-badge +1 variant override |
--wr-tag-bg | var(--wr-color-fill) | .wr-tag +3 variant overrides |
--wr-tag-border | var(--wr-border-base) | .wr-tag +3 variant overrides |
--wr-tag-color | var(--wr-color-on-surface) | .wr-tag +3 variant overrides |
--wr-tag-font-family | var(--wr-font-family-base) | .wr-tag |
--wr-tag-font-size | var(--wr-text-xs) | .wr-tag |
--wr-tag-font-weight | var(--wr-font-weight-medium) | .wr-tag |
--wr-tag-gap | var(--wr-space-xs) | .wr-tag |
--wr-tag-line-height | normal | .wr-tag |
--wr-tag-min-height | 1.375rem | .wr-tag |
--wr-tag-padding-x | var(--wr-space-sm) | .wr-tag +1 variant override |
--wr-tag-padding-y | 0.125rem | .wr-tag |
--wr-tag-radius | var(--wr-border-radius-sm) | .wr-tag +1 variant override |
Dependencies
See also
Guide ColorsThe --wr-color-* tokens, and which one to use for fills, text and borders.Component AlertAn inline status message.Component AvatarA user's picture, with initials as the fallback.Component IconRenders an SVG icon you register by name; ngwr ships none of its own.Component SpinnerAn inline loading indicator.