Number Badge
The Number Badge component displays numerical indicators that help users track quantities, updates, or notifications at a glance.
import {NumberBadge} from "@qualcomm-ui/react/badge"Examples
Value
Use the value prop for auto formatting, or use children for manual content.
Qualcomm
42599+
<NumberBadge>42</NumberBadge>
<NumberBadge value={5} />
<NumberBadge value={150} />
Max (Auto Formatting)
When using the value prop with max, overflow values are automatically formatted. If value exceeds max, the badge displays "max+" and applies special styling. The default max is 99.
Qualcomm
9999+5050+
<NumberBadge value={99} />
<NumberBadge value={100} />
<NumberBadge max={50} value={50} />
<NumberBadge max={50} value={51} />
Emphasis
Multiple color and style options are available via the emphasis prop: neutral (default), neutral-outline, brand, brand-outline, info, success, warning, danger, persistent-black and persistent-white.
Qualcomm
5555555555
<NumberBadge emphasis="neutral" value={5} />
<NumberBadge emphasis="neutral-outline" value={5} />
<NumberBadge emphasis="brand" value={5} />
<NumberBadge emphasis="brand-outline" value={5} />
<NumberBadge emphasis="info" value={5} />
<NumberBadge emphasis="success" value={5} />
<NumberBadge emphasis="warning" value={5} />
<NumberBadge emphasis="danger" value={5} />
<NumberBadge emphasis="persistent-black" value={5} />
<NumberBadge emphasis="persistent-white" value={5} />
Size
Control dimensions using the size prop. Three sizes are available: sm, md (default), and lg.
Qualcomm
555
<NumberBadge size="sm" value={5} />
<NumberBadge size="md" value={5} />
<NumberBadge size="lg" value={5} />
Disabled
Set the disabled prop to visually indicate that the badge is inactive.
Qualcomm
55
<NumberBadge emphasis="brand" value={5} />
<NumberBadge disabled emphasis="brand" value={5} />
API
<NumberBadge>
| Prop | Type | Default |
|---|---|---|
The badge disabled state. | boolean | |
Governs the color and style of the number badge. | | 'neutral' | 'neutral' |
Maximum value to display. | number | 99 |
Allows you to replace the component's HTML element with a different tag or component. Learn more | | ReactElement | |
Governs the size of the badge. | | 'sm' | 'md' |
The numeric value to display. | number |
Type
booleanDescription
The badge disabled state.
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.
Type
numberDescription
Maximum value to display.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
| 'sm'
| 'md'
| 'lg'
Description
Governs the size of the badge.
Type
numberDescription
The numeric value to display.
| Attribute / Property | Value |
|---|---|
className | 'qui-badge__root' |
data-disabled | |
data-emphasis | | 'neutral' |
data-overflow | |
data-part | 'root' |
data-scope | 'number-badge' |
data-size | | 'sm' |
classNameValue
'qui-badge__root'data-disabledValue
data-emphasisValue
| 'neutral'
| 'neutral-outline'
| 'brand'
| 'brand-outline'
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'persistent-black'
| 'persistent-white'
data-overflowValue
data-partValue
'root'data-scopeValue
'number-badge'data-sizeValue
| 'sm'
| 'md'
| 'lg'