Tag

Tags present static metadata or contextual information. They provide a fixed visual treatment, making them ideal for displaying system-defined values, attributes, or informational labels.

import {TagDirective} from "@qualcomm-ui/angular/tag"

Examples

Icons

Icons are supplied using the startIcon and endIcon properties.

LabelLabel

<span emphasis="neutral" q-tag startIcon="Plus">Label</span>
<span emphasis="neutral" endIcon="Plus" q-tag>Label</span>

Variants

Choose from three variants: link, selectable and dismissable.

The link and selectable variants are interactive and should use a <button> element. The dismissable variant and tags without a variant are non-interactive and should use a <span> element.

dismissable

<button endIcon="Link2" q-tag variant="link">link</button>
<button q-tag variant="selectable">selectable</button>
<span q-tag variant="dismissable">dismissable</span>

Colors

Control the visual emphasis with different colors via the emphasis property.

<button
  emphasis="outline-brand"
  q-tag
  startIcon="Smile"
  variant="selectable"
>
  outline-brand
</button>
<button
  emphasis="outline-neutral"
  q-tag
  startIcon="Smile"
  variant="selectable"
>
  outline-neutral
</button>
<button emphasis="neutral" q-tag startIcon="Smile" variant="selectable">
  neutral
</button>
<button emphasis="blue" q-tag startIcon="Smile" variant="selectable">
  blue
</button>
<button emphasis="cyan" q-tag startIcon="Smile" variant="selectable">
  cyan
</button>
<button emphasis="teal" q-tag startIcon="Smile" variant="selectable">
  teal
</button>
<button emphasis="green" q-tag startIcon="Smile" variant="selectable">
  green
</button>
<button emphasis="kiwi" q-tag startIcon="Smile" variant="selectable">
  kiwi
</button>
<button emphasis="yellow" q-tag startIcon="Smile" variant="selectable">
  yellow
</button>
<button emphasis="orange" q-tag startIcon="Smile" variant="selectable">
  orange
</button>
<button emphasis="red" q-tag startIcon="Smile" variant="selectable">
  red
</button>
<button emphasis="magenta" q-tag startIcon="Smile" variant="selectable">
  magenta
</button>
<button emphasis="purple" q-tag startIcon="Smile" variant="selectable">
  purple
</button>

Sizes

Choose from three sizes: sm, md and lg. The default size is md.

LabelLabelLabel

<span q-tag size="sm" variant="dismissable">Label</span>
<span q-tag size="md" variant="dismissable">Label</span>
<span q-tag size="lg" variant="dismissable">Label</span>

States

Disable the tag by setting the disabled property.

<button q-tag variant="dismissable">Label</button>
<button disabled q-tag variant="dismissable">Label</button>

Radius

Control the border radius of the tag with the radius property. The default radius is square.

LabelLabel

<span q-tag radius="square">Label</span>
<span q-tag radius="rounded">Label</span>

API

q-tag

Prop	Type	Default
disabled Controls the component's interactivity. If `true`, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.	boolean
emphasis Governs the color of the tag.	\| 'outline-brand' \| 'outline-neutral' \| 'neutral' \| 'blue' \| 'cyan' \| 'teal' \| 'green' \| 'kiwi' \| 'yellow' \| 'orange' \| 'red' \| 'magenta' \| 'purple'	'brand'
endIcon lucide-angular icon, positioned after the label. Note that this property is ignored if variant is `dismissable`, as it is reserved for the dismiss icon.	\| LucideIconData \| string

radius Governs the shape of the tag.	\| 'square' \| 'rounded'	'square'
size Governs the size of the text, icons, spacing, and padding.	\| 'sm' \| 'md' \| 'lg'	'md'
startIcon lucide-angular icon, positioned before the label.	\| LucideIconData \| string

variant Governs the interactive style of the tag.	\| 'link' \| 'selectable' \| 'dismissable'
(dismiss) Emits when the dismiss button is clicked. Only applicable when variant is `dismissable`.	void

disabled

Type

boolean

Description

Controls the component's interactivity. If true, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.

emphasis

Type

| 'outline-brand'
| 'outline-neutral'
| 'neutral'
| 'blue'
| 'cyan'
| 'teal'
| 'green'
| 'kiwi'
| 'yellow'
| 'orange'
| 'red'
| 'magenta'
| 'purple'

Description

Governs the color of the tag.

endIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned after the label. Note that this property is ignored if variant is dismissable, as it is reserved for the dismiss icon.