Text Badge

1.2.0

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.

neutralbrandinfosuccesswarningdanger

bluecyanteallimegreenyellowamberorangeredmagentavioletpurple

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="teal">teal</Badge>
        <Badge emphasis="lime">lime</Badge>
        <Badge emphasis="green">green</Badge>
        <Badge emphasis="yellow">yellow</Badge>
        <Badge emphasis="amber">amber</Badge>
        <Badge emphasis="orange">orange</Badge>
        <Badge emphasis="red">red</Badge>
        <Badge emphasis="magenta">magenta</Badge>
        <Badge emphasis="violet">violet</Badge>
        <Badge emphasis="purple">purple</Badge>
      </div>
    </div>
  )
}

Variant

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

neutralbrandinfosuccesswarningdanger

bluecyanteallimegreenyellowamberorangeredmagentavioletpurple

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="teal" variant="subtle">
          teal
        </Badge>
        <Badge emphasis="lime" variant="subtle">
          lime
        </Badge>
        <Badge emphasis="green" variant="subtle">
          green
        </Badge>
        <Badge emphasis="yellow" variant="subtle">
          yellow
        </Badge>
        <Badge emphasis="amber" variant="subtle">
          amber
        </Badge>
        <Badge emphasis="orange" variant="subtle">
          orange
        </Badge>
        <Badge emphasis="red" variant="subtle">
          red
        </Badge>
        <Badge emphasis="magenta" variant="subtle">
          magenta
        </Badge>
        <Badge emphasis="violet" variant="subtle">
          violet
        </Badge>
        <Badge emphasis="purple" variant="subtle">
          purple
        </Badge>
      </div>
    </div>
  )
}

Size

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

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.

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' \| 'amber' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'magenta' \| 'orange' \| 'purple' \| 'red' \| 'teal' \| 'violet' \| 'yellow' \| 'kiwi'	'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'
| 'amber'
| 'blue'
| 'cyan'
| 'green'
| 'lime'
| 'magenta'
| 'orange'
| 'purple'
| 'red'
| 'teal'
| 'violet'
| 'yellow'
| 'kiwi'

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' \| 'amber' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'magenta' \| 'orange' \| 'purple' \| 'red' \| 'teal' \| 'violet' \| 'yellow' \| 'kiwi'
`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'
| 'amber'
| 'blue'
| 'cyan'
| 'green'
| 'lime'
| 'magenta'
| 'orange'
| 'purple'
| 'red'
| 'teal'
| 'violet'
| 'yellow'
| 'kiwi'

data-part

Value

'root'

data-scope

Value

'text-badge'

data-size

Value

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

data-variant

Value

| 'default'
| 'subtle'

Last updated on Apr 8, 2026 by Ryan Bower

Status Badge

Divider