Number Badge
The Number Badge component displays numerical indicators that help users track quantities, updates, or notifications at a glance.
import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge"Examples
Value
Use the value input for auto formatting, or use content projection for manual content.
<span q-number-badge>42</span>
<span q-number-badge [value]="5"></span>
<span q-number-badge [value]="150"></span>
Max (Auto Formatting)
When using the value input with max, overflow values are automatically formatted. If value exceeds max, the badge displays "max+" and applies special styling. The default max is 99.
<span q-number-badge [value]="99"></span>
<span q-number-badge [value]="100"></span>
<span q-number-badge [max]="50" [value]="50"></span>
<span q-number-badge [max]="50" [value]="51"></span>
Variant
Multiple color and style options are available via the variant input: neutral (default), neutral-outline, brand, brand-outline, info, success, warning, danger, persistent-black and persistent-white.
<span q-number-badge variant="neutral" [value]="5"></span>
<span q-number-badge variant="neutral-outline" [value]="5"></span>
<span q-number-badge variant="brand" [value]="5"></span>
<span q-number-badge variant="brand-outline" [value]="5"></span>
<span q-number-badge variant="info" [value]="5"></span>
<span q-number-badge variant="success" [value]="5"></span>
<span q-number-badge variant="warning" [value]="5"></span>
<span q-number-badge variant="danger" [value]="5"></span>
<span q-number-badge variant="persistent-black" [value]="5"></span>
<span q-number-badge variant="persistent-white" [value]="5"></span>
Size
Control dimensions using the size input. Three sizes are available: sm, md (default), and lg.
<span q-number-badge size="sm" [value]="5"></span>
<span q-number-badge size="md" [value]="5"></span>
<span q-number-badge size="lg" [value]="5"></span>
Disabled
Set the disabled input to visually indicate that the badge is inactive.
<span q-number-badge variant="brand" [value]="5"></span>
<span q-number-badge variant="brand" [disabled]="true" [value]="5"></span>
API
q-number-badge
| Prop | Type | Default |
|---|---|---|
The badge disabled state. | boolean | |
Governs the color and style of the number badge. | | 'neutral' | 'neutral' |
Maximum value to display for the number badge. | number | 99 |
Governs the size of the badge. | | 'sm' | 'md' |
The numeric value to display for the number badge. | number |
boolean| 'neutral'
| 'neutral-outline'
| 'brand'
| 'brand-outline'
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'persistent-black'
| 'persistent-white'
number| 'sm'
| 'md'
| 'lg'
number| Attribute / Property | Value |
|---|---|
class | 'qui-badge__root' |
data-disabled | |
data-emphasis | | 'neutral' |
data-overflow | |
data-part | 'root' |
data-scope | 'number-badge' |
data-size | | 'sm' |
class'qui-badge__root'data-disableddata-emphasis| 'neutral'
| 'neutral-outline'
| 'brand'
| 'brand-outline'
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'persistent-black'
| 'persistent-white'
data-overflowdata-part'root'data-scope'number-badge'data-size| 'sm'
| 'md'
| 'lg'