Text Badge

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

Examples

Emphasis

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

neutralbrandinfosuccesswarningdanger

bluecyanteallimegreenyellowamberorangeredmagentavioletpurple

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="teal" q-badge>teal</span>
        <span emphasis="lime" q-badge>lime</span>
        <span emphasis="green" q-badge>green</span>
        <span emphasis="yellow" q-badge>yellow</span>
        <span emphasis="amber" q-badge>amber</span>
        <span emphasis="orange" q-badge>orange</span>
        <span emphasis="red" q-badge>red</span>
        <span emphasis="magenta" q-badge>magenta</span>
        <span emphasis="violet" q-badge>violet</span>
        <span emphasis="purple" q-badge>purple</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).

neutralbrandinfosuccesswarningdanger

bluecyanteallimegreenyellowamberorangeredmagentavioletpurple

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="teal" q-badge variant="subtle">teal</span>
        <span emphasis="lime" q-badge variant="subtle">lime</span>
        <span emphasis="green" q-badge variant="subtle">green</span>
        <span emphasis="yellow" q-badge variant="subtle">yellow</span>
        <span emphasis="amber" q-badge variant="subtle">amber</span>
        <span emphasis="orange" q-badge variant="subtle">orange</span>
        <span emphasis="red" q-badge variant="subtle">red</span>
        <span emphasis="magenta" q-badge variant="subtle">magenta</span>
        <span emphasis="violet" q-badge variant="subtle">violet</span>
        <span emphasis="purple" q-badge variant="subtle">purple</span>
      </div>
    </div>
  `,
})
export class TextBadgeVariantDemo {}

Size

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

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.

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

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' \| 'amber' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'magenta' \| 'orange' \| 'purple' \| 'red' \| 'teal' \| 'violet' \| 'yellow' \| 'kiwi'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`data-text-badge-part`	'root'
`data-variant`	\| 'default' \| 'subtle'

class

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-size

Value

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

data-text-badge-part

Value

'root'

data-variant

Value

| 'default'
| 'subtle'

Last updated on Apr 8, 2026 by Ryan Bower

Status Badge

Breadcrumbs