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
A tag renders as one of four types:
- read-only (default) renders static metadata. Use a
<span>. - dismissable adds a close button. Use a
<span>, set variant todismissableand pair it with the dismiss output. - selectable renders as a toggle button. Use a
<button>and set variant toselectable. - link renders the tag as an anchor. Use an
<a q-tag>host withrouterLinkorhref. Setaria-currenton the active<a q-tag>host for accessibility. The optional active input applies the current-item styling.
<span q-tag>read-only</span>
<span q-tag variant="dismissable">dismissable</span>
<button q-tag variant="selectable">selectable</button>
<a q-tag routerLink="/">link</a>
<a active aria-current="true" q-tag routerLink="/components/tag">
active link
</a>
Controlled State
Set the initial value using the defaultSelected input, or use the selected input together with the selectedChange output to control the value manually. The pair supports [(selected)] two-way binding. Only applicable when variant is selectable.
<button
q-tag
variant="selectable"
[startIcon]="selected() ? 'Check' : 'Plus'"
[(selected)]="selected"
>
{{ selected() ? "Subscribed" : "Subscribe" }}
</button>
Colors
Control the visual emphasis with different colors via the emphasis property. The default emphasis is outline-brand.
<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="lime" q-tag startIcon="Smile" variant="selectable">
lime
</button>
<button emphasis="green" q-tag startIcon="Smile" variant="selectable">
green
</button>
<button emphasis="yellow" q-tag startIcon="Smile" variant="selectable">
yellow
</button>
<button emphasis="amber" q-tag startIcon="Smile" variant="selectable">
amber
</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="violet" q-tag startIcon="Smile" variant="selectable">
violet
</button>
<button emphasis="purple" q-tag startIcon="Smile" variant="selectable">
purple
</button>
Sizes
Choose from four sizes: sm, md, lg, and xl. The default size is md.
LabelLabelLabelLabel
<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>
<span q-tag size="xl" variant="dismissable">Label</span>
States
Disable the tag by setting the disabled property.
LabelLabel
<span q-tag variant="dismissable">Label</span>
<span disabled q-tag variant="dismissable">Label</span>
Shape
Control the shape of the tag with the shape property. The default shape is square.
LabelLabel
<span q-tag shape="square">Label</span>
<span q-tag shape="rounded">Label</span>
API
q-tag
v2.12.0
Type
booleanDescription
Applies the active style to a link tag. Honored only on an
<a q-tag> host.
This is purely visual; set aria-current
on the anchor for accessibility.v2.11.0
Type
booleanDescription
Controls the component's interactivity. If
true, the component becomes
unresponsive to input and is visually dimmed to indicate its disabled state.Type
| 'outline-brand'
| 'outline-neutral'
| 'neutral'
| 'amber'
| 'blue'
| 'cyan'
| 'green'
| 'lime'
| 'magenta'
| 'orange'
| 'purple'
| 'red'
| 'teal'
| 'violet'
| 'yellow'
| 'kiwi'
Description
Governs the color of the tag.
Type
| LucideIconData
| string
Description
lucide-angular icon, positioned after the label.
Ignored when variant is
dismissable, as it is reserved for the
dismiss icon.To customize the element, provide it using the directive instead:
<svg q-end-icon icon="..."></svg>
Type
booleanDescription
Controls the selected state. Pair with selectedChange (or use
[(selected)] for two-way binding) for a fully controlled component.
When omitted, the tag manages its own selected state internally.
Only applicable when variant is selectable.v1.16.0
Type
| 'square'
| 'rounded'
Description
Governs the shape of the tag.
Type
| 'sm'
| 'md'
| 'lg'
| 'xl'
Description
Governs the size of the text, icons, spacing, and padding.
Type
| LucideIconData
| string
Description
lucide-angular icon, positioned before the label.
To customize the element, provide it using the directive instead:
<svg q-start-icon icon="..."></svg>
Type
| 'selectable'
| 'dismissable'
| 'link'
Description
Governs the interactive style of the tag.
Type
voidDescription
Emits when the dismiss button is clicked.
Only applicable when variant is
dismissable.v2.11.0
| {
'aria-disabled'?:
| 'true'
| 'false'
| undefined
className: 'qui-tag__root'
'data-active'?: ''
'data-disabled': ''
'data-emphasis':
| 'outline-brand'
| 'outline-neutral'
| 'neutral'
| 'amber'
| 'blue'
| 'cyan'
| 'green'
| 'lime'
| 'magenta'
| 'orange'
| 'purple'
| 'red'
| 'teal'
| 'violet'
| 'yellow'
| 'kiwi'
'data-selected': ''
'data-shape':
| 'square'
| 'rounded'
'data-size':
| 'sm'
| 'md'
| 'lg'
| 'xl'
'data-tag-part': 'root'
'data-variant'?:
| 'selectable'
| 'dismissable'
| 'link'
tabIndex?: -1
}
| {
'aria-disabled'?:
| 'true'
| 'false'
| undefined
'aria-pressed'?:
| 'true'
| 'false'
| undefined
className: 'qui-tag__root'
'data-disabled': ''
'data-emphasis':
| 'outline-brand'
| 'outline-neutral'
| 'neutral'
| 'amber'
| 'blue'
| 'cyan'
| 'green'
| 'lime'
| 'magenta'
| 'orange'
| 'purple'
| 'red'
| 'teal'
| 'violet'
| 'yellow'
| 'kiwi'
'data-selected': ''
'data-shape':
| 'square'
| 'rounded'
'data-size':
| 'sm'
| 'md'
| 'lg'
| 'xl'
'data-tag-part': 'root'
'data-variant'?:
| 'selectable'
| 'dismissable'
| 'link'
tabIndex?: -1
}
StartIcon, q-start-icon
classValue
'qui-tag__icon'data-tag-partValue
'start-icon'EndIcon, q-end-icon
Note that the endIcon property and directive are ignored when variant is dismissible.
classValue
'qui-tag__icon'data-tag-partValue
'end-icon'Last updated on by Olaf Kappes