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 {IconBadgeDirective} from "@qualcomm-ui/angular/badge"Examples
Icon
Use the icon input to provide a Lucide icon name, or use content projection for custom SVG content.
Qualcomm
<span icon="Star" q-icon-badge></span>
<span q-icon-badge>
<svg fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
</span>
Emphasis
Use the emphasis input to convey semantic meaning or add color.
Qualcomm
import {Component} from "@angular/core"
import {Star} from "lucide-angular"
import {IconBadgeDirective} from "@qualcomm-ui/angular/badge"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
@Component({
imports: [IconBadgeDirective],
providers: [provideIcons({Star})],
selector: "icon-badge-emphasis-demo",
template: `
<div class="flex flex-col gap-4">
<div class="flex flex-wrap items-center gap-2">
<span emphasis="neutral" icon="Star" q-icon-badge></span>
<span emphasis="brand" icon="Star" q-icon-badge></span>
<span emphasis="info" icon="Star" q-icon-badge></span>
<span emphasis="success" icon="Star" q-icon-badge></span>
<span emphasis="warning" icon="Star" q-icon-badge></span>
<span emphasis="danger" icon="Star" q-icon-badge></span>
</div>
<div class="flex flex-wrap items-center gap-2">
<span emphasis="blue" icon="Star" q-icon-badge></span>
<span emphasis="cyan" icon="Star" q-icon-badge></span>
<span emphasis="green" icon="Star" q-icon-badge></span>
<span emphasis="kiwi" icon="Star" q-icon-badge></span>
<span emphasis="magenta" icon="Star" q-icon-badge></span>
<span emphasis="orange" icon="Star" q-icon-badge></span>
<span emphasis="purple" icon="Star" q-icon-badge></span>
<span emphasis="red" icon="Star" q-icon-badge></span>
<span emphasis="teal" icon="Star" q-icon-badge></span>
<span emphasis="yellow" icon="Star" q-icon-badge></span>
</div>
</div>
`,
})
export class IconBadgeEmphasisDemo {}Variant
The variant input controls the aspect of the badge. Two variants are available: default (bolder appearance) and subtle (muted appearance).
Qualcomm
import {Component} from "@angular/core"
import {Star} from "lucide-angular"
import {IconBadgeDirective} from "@qualcomm-ui/angular/badge"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"
@Component({
imports: [IconBadgeDirective],
providers: [provideIcons({Star})],
selector: "icon-badge-variant-demo",
template: `
<div class="flex flex-col gap-4">
<div class="flex flex-wrap items-center gap-2">
<span
emphasis="neutral"
icon="Star"
q-icon-badge
variant="subtle"
></span>
<span emphasis="brand" icon="Star" q-icon-badge variant="subtle"></span>
<span emphasis="info" icon="Star" q-icon-badge variant="subtle"></span>
<span
emphasis="success"
icon="Star"
q-icon-badge
variant="subtle"
></span>
<span
emphasis="warning"
icon="Star"
q-icon-badge
variant="subtle"
></span>
<span
emphasis="danger"
icon="Star"
q-icon-badge
variant="subtle"
></span>
</div>
<div class="flex flex-wrap items-center gap-2">
<span emphasis="blue" icon="Star" q-icon-badge variant="subtle"></span>
<span emphasis="cyan" icon="Star" q-icon-badge variant="subtle"></span>
<span emphasis="green" icon="Star" q-icon-badge variant="subtle"></span>
<span emphasis="kiwi" icon="Star" q-icon-badge variant="subtle"></span>
<span
emphasis="magenta"
icon="Star"
q-icon-badge
variant="subtle"
></span>
<span
emphasis="orange"
icon="Star"
q-icon-badge
variant="subtle"
></span>
<span
emphasis="purple"
icon="Star"
q-icon-badge
variant="subtle"
></span>
<span emphasis="red" icon="Star" q-icon-badge variant="subtle"></span>
<span emphasis="teal" icon="Star" q-icon-badge variant="subtle"></span>
<span
emphasis="yellow"
icon="Star"
q-icon-badge
variant="subtle"
></span>
</div>
</div>
`,
})
export class IconBadgeVariantDemo {}Size
Control dimensions using the size input. Six sizes are available: xxs, xs, sm, md (default), lg, and xl.
Qualcomm
<span icon="Star" q-icon-badge size="xxs"></span>
<span icon="Star" q-icon-badge size="xs"></span>
<span icon="Star" q-icon-badge size="sm"></span>
<span icon="Star" q-icon-badge size="md"></span>
<span icon="Star" q-icon-badge size="lg"></span>
<span icon="Star" q-icon-badge size="xl"></span>
Disabled
Set the disabled input to visually indicate that the badge is inactive.
Qualcomm
<span emphasis="brand" icon="Star" q-icon-badge></span>
<span emphasis="brand" icon="Star" q-icon-badge [disabled]="true"></span>
API
q-icon-badge
| Prop | Type | Default |
|---|---|---|
The badge disabled state. | boolean | |
Governs the color of the icon badge. | | 'neutral' | 'neutral' |
lucide-angular icon to display in the icon badge. | | LucideIconData | |
Governs the size of the badge. | | 'xxs' | 'md' |
Governs the style of the icon badge. | | 'default' | 'default' |
Type
booleanDescription
The badge disabled state.
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.
Type
| LucideIconData
| string
Description
lucide-angular icon to display in the icon badge.
Type
| 'xxs'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
Description
Governs the size of the badge.
Type
| 'default'
| 'subtle'
Description
Governs the style of the icon badge.
| Attribute / Property | Value |
|---|---|
class | 'qui-badge__root' |
data-disabled | |
data-emphasis | | 'neutral' |
data-part | 'root' |
data-scope | 'icon-badge' |
data-size | | 'xxs' |
data-variant | | 'default' |
classValue
'qui-badge__root'data-disabledValue
data-emphasisValue
| 'neutral'
| 'brand'
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'blue'
| 'cyan'
| 'green'
| 'kiwi'
| 'magenta'
| 'orange'
| 'purple'
| 'red'
| 'teal'
| 'yellow'
data-partValue
'root'data-scopeValue
'icon-badge'data-sizeValue
| 'xxs'
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
data-variantValue
| 'default'
| 'subtle'