Text Badge

The Text Badge component combines color and text to visually communicate status, category, or action. It helps users quickly identify meaning through text and consistent color cues.

import {Badge} from "@qualcomm-ui/react/badge"

Examples

Emphasis

Use the emphasis prop to convey semantic meaning or categorize content.

Brand

neutralbrandinfosuccesswarningdanger

bluecyangreenkiwimagentaorangepurpleredtealyellow

import type {ReactElement} from "react"

import {Badge} from "@qualcomm-ui/react/badge"

export function TextBadgeEmphasisDemo(): ReactElement {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Badge emphasis="neutral">neutral</Badge>
        <Badge emphasis="brand">brand</Badge>
        <Badge emphasis="info">info</Badge>
        <Badge emphasis="success">success</Badge>
        <Badge emphasis="warning">warning</Badge>
        <Badge emphasis="danger">danger</Badge>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Badge emphasis="blue">blue</Badge>
        <Badge emphasis="cyan">cyan</Badge>
        <Badge emphasis="green">green</Badge>
        <Badge emphasis="kiwi">kiwi</Badge>
        <Badge emphasis="magenta">magenta</Badge>
        <Badge emphasis="orange">orange</Badge>
        <Badge emphasis="purple">purple</Badge>
        <Badge emphasis="red">red</Badge>
        <Badge emphasis="teal">teal</Badge>
        <Badge emphasis="yellow">yellow</Badge>
      </div>
    </div>
  )
}

Variant

The variant prop controls the aspect of the badge. Two variants are available: default (bolder appearance) and subtle (muted appearance).

Brand

neutralbrandinfosuccesswarningdanger

bluecyangreenkiwimagentaorangepurpleredtealyellow

import type {ReactElement} from "react"

import {Badge} from "@qualcomm-ui/react/badge"

export function TextBadgeVariantDemo(): ReactElement {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Badge emphasis="neutral" variant="subtle">
          neutral
        </Badge>
        <Badge emphasis="brand" variant="subtle">
          brand
        </Badge>
        <Badge emphasis="info" variant="subtle">
          info
        </Badge>
        <Badge emphasis="success" variant="subtle">
          success
        </Badge>
        <Badge emphasis="warning" variant="subtle">
          warning
        </Badge>
        <Badge emphasis="danger" variant="subtle">
          danger
        </Badge>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Badge emphasis="blue" variant="subtle">
          blue
        </Badge>
        <Badge emphasis="cyan" variant="subtle">
          cyan
        </Badge>
        <Badge emphasis="green" variant="subtle">
          green
        </Badge>
        <Badge emphasis="kiwi" variant="subtle">
          kiwi
        </Badge>
        <Badge emphasis="magenta" variant="subtle">
          magenta
        </Badge>
        <Badge emphasis="orange" variant="subtle">
          orange
        </Badge>
        <Badge emphasis="purple" variant="subtle">
          purple
        </Badge>
        <Badge emphasis="red" variant="subtle">
          red
        </Badge>
        <Badge emphasis="teal" variant="subtle">
          teal
        </Badge>
        <Badge emphasis="yellow" variant="subtle">
          yellow
        </Badge>
      </div>
    </div>
  )
}

Size

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

Brand

SmallMediumLarge

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Disabled

Set the disabled prop to visually indicate that the badge is inactive.

Brand

EnabledDisabled

<Badge emphasis="brand">Enabled</Badge>
<Badge disabled emphasis="brand">
  Disabled
</Badge>

API

<Badge>

Prop	Type	Default
children React children prop.	ReactNode
disabled The badge disabled state.	boolean
emphasis Governs the color of the text badge.	\| 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'blue' \| 'cyan' \| 'green' \| 'kiwi' \| 'magenta' \| 'orange' \| 'purple' \| 'red' \| 'teal' \| 'yellow'	'neutral'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size Governs the size of the badge.	\| 'sm' \| 'md' \| 'lg'	'md'
variant Governs the style of the text badge.	\| 'default' \| 'subtle'	'default'

children

Type

ReactNode

Description

React children prop.

disabled

Type

boolean

Description

The badge disabled state.

emphasis

Type

| 'neutral'
| 'brand'
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'blue'
| 'cyan'
| 'green'
| 'kiwi'
| 'magenta'
| 'orange'
| 'purple'
| 'red'
| 'teal'
| 'yellow'

Description

Governs the color of the text badge.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

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

Description

Governs the size of the badge.

variant

Type

| 'default'
| 'subtle'

Description

Governs the style of the text badge.

Attribute / Property	Value
`className`	'qui-badge__root'
`data-disabled`
`data-emphasis`	\| 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'blue' \| 'cyan' \| 'green' \| 'kiwi' \| 'magenta' \| 'orange' \| 'purple' \| 'red' \| 'teal' \| 'yellow'
`data-part`	'root'
`data-scope`	'text-badge'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`data-variant`	\| 'default' \| 'subtle'

className

Value

'qui-badge__root'

data-disabled

Value

data-emphasis

Value

| 'neutral'
| 'brand'
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'blue'
| 'cyan'
| 'green'
| 'kiwi'
| 'magenta'
| 'orange'
| 'purple'
| 'red'
| 'teal'
| 'yellow'

data-part

Value

'root'

data-scope

Value

'text-badge'

data-size

Value

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

data-variant

Value

| 'default'
| 'subtle'

Status Badge

Divider