Badge

Overview Style Guidelines Code Demos Accessibility

Installation

<rh-badge number="1" aria-label="1 new message">1</rh-badge>

Slots 0

None

Attributes 3

DOM Property Description Type Default

DOM Property	Description	Type	Default
`state`	Denotes the state-of-affairs this badge represents	`'info' \| 'success' \| 'moderate' \| 'important' \| 'critical' \| undefined`	`unknown`
`number`	Sets a numeric value for a badge. You can pair it with `threshold` attribute to add a `+` sign if the number exceeds the threshold value.	`number \| undefined`	`unknown`
`threshold`	Sets a threshold for the numeric value and adds `+` sign if the numeric value exceeds the threshold value.	`number \| undefined`	`unknown`

state

Denotes the state-of-affairs this badge represents

'info' | 'success' | 'moderate' | 'important' | 'critical' | undefined

unknown

number

Sets a numeric value for a badge.

You can pair it with threshold attribute to add a + sign if the number exceeds the threshold value.

number | undefined

unknown

threshold

Sets a threshold for the numeric value and adds + sign if the numeric value exceeds the threshold value.

number | undefined

unknown

Methods 0

Events 0

CSS Shadow Parts 0

CSS Custom Properties 0

Design Tokens 0