Installation
import { WrBadge, WrTag } from 'ngwr/badge';
@Component({ imports: [WrBadge, WrTag] })
export class MyComponent {}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
rounded (default) keeps the small form-radius, pill rounds the ends fully, and squircle takes the iOS-style smooth corner where corner-shape is supported.
<wr-badge color="primary" shape="pill">Beta</wr-badge>Outlined
Transparent fill with a colored ring and text.
<wr-badge color="primary" outlined>Beta</wr-badge>Tag — icons + loading
<wr-tag> is the richer sibling. Same entry (ngwr/badge), but supports icons, loading state, and outlined / transparent variants.
<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>API
Inputs of <wr-badge>.
| Name | Description | Type | Default |
|---|---|---|---|
color | Color variant. Maps to --wr-color-* CSS variables from the theme. | WrColor | '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>, demoed above and shipped from the same entry point.
| Name | Description | Type | Default |
|---|---|---|---|
color | Intent colour. | WrColor | 'primary' |
icon | Icon rendered beside the label. | WrIconName | null | null |
iconPosition | Which side the icon sits on. | 'start' | 'end' | 'start' |
outlined | Transparent fill with a coloured ring. | boolean | false |
transparent | Drop the fill entirely. | 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
Custom properties ngwr/badge publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--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 | 0.5rem | .wr-badge +3 variant overrides |
--wr-badge-padding-y | 0.25rem | .wr-badge +2 variant overrides |
--wr-badge-radius | var(--wr-border-radius-sm) | .wr-badge +1 variant override |
--wr-tag-bg | var(--wr-color-surface) | .wr-tag +3 variant overrides |
--wr-tag-border | var(--wr-color-outline) | .wr-tag +4 variant overrides |
--wr-tag-color | var(--wr-color-on-surface) | .wr-tag +3 variant overrides |
--wr-tag-font-size | var(--wr-text-xs) | .wr-tag |
--wr-tag-font-weight | 500 | .wr-tag |
--wr-tag-line-height | normal | .wr-tag |
--wr-tag-min-height | 1.375rem | .wr-tag |
--wr-tag-padding-x | 0.5rem | .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 |