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

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 14

Token	Copy
`--rh-border-radius-pill`
`--rh-color-status-caution`
`--rh-color-status-danger`
`--rh-color-status-note`
`--rh-color-status-success`
`--rh-color-status-warning`
`--rh-color-surface-darker`
`--rh-color-surface-lighter`
`--rh-color-text-primary`
`--rh-color-text-primary-on-dark`
`--rh-color-text-primary-on-light`
`--rh-font-size-body-text-xs`
`--rh-line-height-body-text`
`--rh-space-md`