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 {BadgeDirective} from "@qualcomm-ui/angular/badge"

Examples

Emphasis

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

Brand

neutralbrandinfosuccesswarningdanger

bluecyangreenkiwimagentaorangepurpleredtealyellow

import {Component} from "@angular/core"

import {BadgeDirective} from "@qualcomm-ui/angular/badge"

@Component({
  imports: [BadgeDirective],
  selector: "text-badge-emphasis-demo",
  template: `
    <div class="flex flex-col gap-4">
      <div class="flex flex-wrap items-center gap-2">
        <span emphasis="neutral" q-badge>neutral</span>
        <span emphasis="brand" q-badge>brand</span>
        <span emphasis="info" q-badge>info</span>
        <span emphasis="success" q-badge>success</span>
        <span emphasis="warning" q-badge>warning</span>
        <span emphasis="danger" q-badge>danger</span>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <span emphasis="blue" q-badge>blue</span>
        <span emphasis="cyan" q-badge>cyan</span>
        <span emphasis="green" q-badge>green</span>
        <span emphasis="kiwi" q-badge>kiwi</span>
        <span emphasis="magenta" q-badge>magenta</span>
        <span emphasis="orange" q-badge>orange</span>
        <span emphasis="purple" q-badge>purple</span>
        <span emphasis="red" q-badge>red</span>
        <span emphasis="teal" q-badge>teal</span>
        <span emphasis="yellow" q-badge>yellow</span>
      </div>
    </div>
  `,
})
export class TextBadgeEmphasisDemo {}

Variant

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

Brand

neutralbrandinfosuccesswarningdanger

bluecyangreenkiwimagentaorangepurpleredtealyellow

import {Component} from "@angular/core"

import {BadgeDirective} from "@qualcomm-ui/angular/badge"

@Component({
  imports: [BadgeDirective],
  selector: "text-badge-variant-demo",
  template: `
    <div class="flex flex-col gap-4">
      <div class="flex flex-wrap items-center gap-2">
        <span emphasis="neutral" q-badge variant="subtle">neutral</span>
        <span emphasis="brand" q-badge variant="subtle">brand</span>
        <span emphasis="info" q-badge variant="subtle">info</span>
        <span emphasis="success" q-badge variant="subtle">success</span>
        <span emphasis="warning" q-badge variant="subtle">warning</span>
        <span emphasis="danger" q-badge variant="subtle">danger</span>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        <span emphasis="blue" q-badge variant="subtle">blue</span>
        <span emphasis="cyan" q-badge variant="subtle">cyan</span>
        <span emphasis="green" q-badge variant="subtle">green</span>
        <span emphasis="kiwi" q-badge variant="subtle">kiwi</span>
        <span emphasis="magenta" q-badge variant="subtle">magenta</span>
        <span emphasis="orange" q-badge variant="subtle">orange</span>
        <span emphasis="purple" q-badge variant="subtle">purple</span>
        <span emphasis="red" q-badge variant="subtle">red</span>
        <span emphasis="teal" q-badge variant="subtle">teal</span>
        <span emphasis="yellow" q-badge variant="subtle">yellow</span>
      </div>
    </div>
  `,
})
export class TextBadgeVariantDemo {}

Size

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

Brand

SmallMediumLarge

<span q-badge size="sm">Small</span>
<span q-badge size="md">Medium</span>
<span q-badge size="lg">Large</span>

Disabled

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

Brand

EnabledDisabled

<span emphasis="brand" q-badge>Enabled</span>
<span emphasis="brand" q-badge [disabled]="true">Disabled</span>

API

q-badge

Prop	Type	Default
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'
size Governs the size of the badge.	\| 'sm' \| 'md' \| 'lg'	'md'
variant Governs the style of the badge.	\| 'default' \| 'subtle'	'default'

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.

size

Type

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

Description

Governs the size of the badge.

variant

Type

| 'default'
| 'subtle'

Description

Governs the style of the badge.

Attribute / Property	Value
`class`	'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'

class

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

Data Grid / Table