Number Badge

1.4.0

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.

42599+

<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.

9999+5050+

<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>

Multiple color and style options are available via the emphasis input: neutral (default), neutral-outline, brand, brand-outline, info, success, warning, danger, persistent-black and persistent-white.

5555555555

<span emphasis="neutral" q-number-badge [value]="5"></span>
<span emphasis="neutral-outline" q-number-badge [value]="5"></span>
<span emphasis="brand" q-number-badge [value]="5"></span>
<span emphasis="brand-outline" q-number-badge [value]="5"></span>
<span emphasis="info" q-number-badge [value]="5"></span>
<span emphasis="success" q-number-badge [value]="5"></span>
<span emphasis="warning" q-number-badge [value]="5"></span>
<span emphasis="danger" q-number-badge [value]="5"></span>
<span emphasis="persistent-black" q-number-badge [value]="5"></span>
<span emphasis="persistent-white" q-number-badge [value]="5"></span>

Size

Control dimensions using the size input. Three sizes are available: sm, md (default), and lg.

555

<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 emphasis="brand" q-number-badge [value]="5"></span>
<span disabled emphasis="brand" q-number-badge [value]="5"></span>

API

q-number-badge

Prop	Type	Default
disabled The badge disabled state.	boolean
emphasis Governs the color and style of the number badge.	\| 'neutral' \| 'neutral-outline' \| 'brand' \| 'brand-outline' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'persistent-black' \| 'persistent-white'	'neutral'
max Maximum value to display for the number badge.	number	99
size Governs the size of the badge.	\| 'sm' \| 'md' \| 'lg'	'md'
value The numeric value to display for the number badge.	number

disabled

Type

boolean

Description

The badge disabled state.

emphasis

Type

| 'neutral'
| 'neutral-outline'
| 'brand'
| 'brand-outline'
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'persistent-black'
| 'persistent-white'

Description

Governs the color and style of the number badge.

max

Type

number

Description

Maximum value to display for the number badge.

size

Type

| 'sm'
| 'md'
| 'lg'

Description

Governs the size of the badge.

value

Type

number

Description

The numeric value to display for the number badge.

Attribute / Property	Value
`class`	'qui-badge__root'
`data-disabled`
`data-emphasis`	\| 'neutral' \| 'neutral-outline' \| 'brand' \| 'brand-outline' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'persistent-black' \| 'persistent-white'
`data-number-badge-part`	'root'
`data-overflow`
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-badge__root'

data-disabled

Value

data-emphasis

Value

| 'neutral'
| 'neutral-outline'
| 'brand'
| 'brand-outline'
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'persistent-black'
| 'persistent-white'

data-number-badge-part

Value

'root'

data-overflow

Value

data-size

Value

| 'sm'
| 'md'
| 'lg'

Last updated on Apr 18, 2026 by Ryan Bower

Icon Badge

Status Badge