Tag
import {TagDirective} from "@qualcomm-ui/angular/tag"Examples
Icons
Icons are supplied using the startIcon and endIcon properties.
Qualcomm
<button emphasis="neutral" q-tag startIcon="Plus">Label</button>
<button emphasis="neutral" endIcon="Plus" q-tag>Label</button>Variants
Choose from three variants: link, selectable and dismissable.
Qualcomm
<button endIcon="Link2" q-tag variant="link">link</button>
<button q-tag variant="selectable">selectable</button>
<button q-tag variant="dismissable">dismissable</button>Colors
Control the visual emphasis with different colors via the emphasis property.
Qualcomm
<button emphasis="brand" q-tag>Label</button>
<button emphasis="outline-neutral" q-tag>Label</button>
<button emphasis="neutral" q-tag>Label</button>Sizes
Choose from three sizes: sm, md and lg. The default size is md.
Qualcomm
<button q-tag size="sm" variant="dismissable">Label</button>
<button q-tag size="md" variant="dismissable">Label</button>
<button q-tag size="lg" variant="dismissable">Label</button>States
Disable the tag by setting the disabled property.
Qualcomm
<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.
Qualcomm
<button q-tag radius="square">Label</button>
<button q-tag radius="rounded">Label</button>API
q-tag
| Prop | Type | Default |
|---|---|---|
Controls the component's interactivity. If true, the component becomes
unresponsive to input and is visually dimmed to indicate its disabled state. | boolean | |
Governs the color of the tag. | | 'brand' | 'brand' |
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 | |
To customize the element, provide it using the directive instead:
<svg q-end-icon icon="..."></svg> | ||
Governs the shape of the tag. | | 'square' | 'square' |
Governs the size of the text, icons, spacing, and padding. | | 'sm' | 'md' |
lucide-angular icon, positioned before the label. | | LucideIconData | |
To customize the element, provide it using the directive instead:
<svg q-start-icon icon="..."></svg> | ||
Governs the interactive style of the tag. | | 'link' | |
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
| 'brand'
| 'outline-neutral'
| 'neutral'
Description
Governs the color of the tag.
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.To customize the element, provide it using the directive instead:
<svg q-end-icon icon="..."></svg>
Type
| 'square'
| 'rounded'
Description
Governs the shape of the tag.
Type
| 'sm'
| 'md'
| 'lg'
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
| 'link'
| 'selectable'
| 'dismissable'
Description
Governs the interactive style of the tag.
| Attribute / Property | Value |
|---|---|
class | 'qui-tag__root' |
data-disabled | |
data-emphasis | | 'brand' |
data-part | 'root' |
data-radius | | 'square' |
data-scope | 'tag' |
data-size | | 'sm' |
data-variant | | 'link' |
classValue
'qui-tag__root'data-disabledValue
data-emphasisValue
| 'brand'
| 'outline-neutral'
| 'neutral'
data-partValue
'root'data-radiusValue
| 'square'
| 'rounded'
data-scopeValue
'tag'data-sizeValue
| 'sm'
| 'md'
| 'lg'
data-variantValue
| 'link'
| 'selectable'
| 'dismissable'
StartIcon, q-start-icon
| Attribute / Property | Value |
|---|---|
class | 'qui-tag__icon' |
data-part | 'start-icon' |
data-scope | 'tag' |
data-size | | 'sm' |
classValue
'qui-tag__icon'data-partValue
'start-icon'data-scopeValue
'tag'data-sizeValue
| 'sm'
| 'md'
| 'lg'
EndIcon, q-end-icon
Note that the endIcon property and directive are ignored when variant is dismissible.
| Attribute / Property | Value |
|---|---|
class | 'qui-tag__icon' |
data-part | 'end-icon' |
data-scope | 'tag' |
data-size | | 'sm' |
classValue
'qui-tag__icon'data-partValue
'end-icon'data-scopeValue
'tag'data-sizeValue
| 'sm'
| 'md'
| 'lg'