Icon Badge

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

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

Examples

Icon

Use the icon prop to provide a Lucide icon, or use children for custom SVG content.

Brand

<IconBadge icon={Star} />
<IconBadge>
  <svg fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
  </svg>
</IconBadge>

Emphasis

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

Brand

import type {ReactElement} from "react"

import {Star} from "lucide-react"

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

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

Variant

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

Brand

import type {ReactElement} from "react"

import {Star} from "lucide-react"

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

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

Size

Control dimensions using the size prop. Six sizes are available: xxs, xs, sm, md (default), lg, and xl.

Brand

<IconBadge icon={Star} size="xxs" />
<IconBadge icon={Star} size="xs" />
<IconBadge icon={Star} size="sm" />
<IconBadge icon={Star} size="md" />
<IconBadge icon={Star} size="lg" />
<IconBadge icon={Star} size="xl" />

Disabled

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

Brand

<IconBadge emphasis="brand" icon={Star} />
<IconBadge disabled emphasis="brand" icon={Star} />

API

<IconBadge>

Prop	Type	Default
children React children prop. When provided, overrides the icon prop.	ReactNode
disabled The badge disabled state.	boolean
emphasis Governs the color of the icon badge.	\| 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'blue' \| 'cyan' \| 'green' \| 'kiwi' \| 'magenta' \| 'orange' \| 'purple' \| 'red' \| 'teal' \| 'yellow'	'neutral'
icon lucide-react icon to display in the badge.	\| LucideIcon \| ReactNode
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.	\| 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
variant Governs the style of the icon badge.	\| 'default' \| 'subtle'	'default'

children

Type

ReactNode

Description

React children prop. When provided, overrides the icon 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 icon badge.

icon

Type

| LucideIcon
| ReactNode

Description

lucide-react icon to display in the 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

| 'xxs'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'

Description

Governs the size of the badge.

variant

Type

| 'default'
| 'subtle'

Description

Governs the style of the icon 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`	'icon-badge'
`data-size`	\| 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'
`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

'icon-badge'

data-size

Value

| 'xxs'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'

data-variant

Value

| 'default'
| 'subtle'

Avatar

Number Badge