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 {Tag} from "@qualcomm-ui/react/tag"Examples
Icons
Icons are supplied using the startIcon and endIcon props.
LabelLabel
<Tag emphasis="neutral" startIcon={Plus}>
Label
</Tag>
<Tag emphasis="neutral" endIcon={Plus}>
Label
</Tag>
Variants
A tag renders as one of four types:
- read-only (default) renders static metadata.
- dismissable adds a close button. Set variant to
dismissableand pair it with the dismiss callback. - selectable renders as a toggle
<button>. Set variant toselectable. - link renders the tag as an anchor. Use the render prop to supply
<Link to="…" />or<a href="…" />. Setaria-currenton the active anchor for accessibility. The optional active prop applies the current-item styling.
<Tag>read-only</Tag>
<Tag variant="dismissable">dismissable</Tag>
<Tag variant="selectable">selectable</Tag>
<Tag render={<Link to="/" />}>link</Tag>
<Tag active render={<Link aria-current="true" to="/components/tag" />}>
active link
</Tag>
Controlled State
Set the initial value using the defaultSelected prop, or use selected and onSelectedChange to control the value manually. These props follow our controlled state pattern. Only applicable when variant is selectable.
import {type ReactElement, useState} from "react"
import {Check, Plus, Star} from "lucide-react"
import {Tag} from "@qualcomm-ui/react/tag"
export function TagControlledDemo(): ReactElement {
const [selected, setSelected] = useState<boolean>(false)
return (
<div className="flex flex-col items-start gap-2">
<Tag
endIcon={<Star />}
onSelectedChange={setSelected}
selected={selected}
size="lg"
startIcon={selected ? Check : Plus}
variant="selectable"
>
{selected ? "Subscribed" : "Subscribe"}
</Tag>
</div>
)
}Colors
Control the visual emphasis with different colors via the emphasis prop. The default emphasis is outline-brand.
<Tag emphasis="outline-brand" startIcon={Smile} variant="selectable">
outline-brand
</Tag>
<Tag emphasis="outline-neutral" startIcon={Smile} variant="selectable">
outline-neutral
</Tag>
<Tag emphasis="neutral" startIcon={Smile} variant="selectable">
neutral
</Tag>
<Tag emphasis="blue" startIcon={Smile} variant="selectable">
blue
</Tag>
<Tag emphasis="cyan" startIcon={Smile} variant="selectable">
cyan
</Tag>
<Tag emphasis="teal" startIcon={Smile} variant="selectable">
teal
</Tag>
<Tag emphasis="lime" startIcon={Smile} variant="selectable">
lime
</Tag>
<Tag emphasis="green" startIcon={Smile} variant="selectable">
green
</Tag>
<Tag emphasis="yellow" startIcon={Smile} variant="selectable">
yellow
</Tag>
<Tag emphasis="amber" startIcon={Smile} variant="selectable">
amber
</Tag>
<Tag emphasis="orange" startIcon={Smile} variant="selectable">
orange
</Tag>
<Tag emphasis="red" startIcon={Smile} variant="selectable">
red
</Tag>
<Tag emphasis="magenta" startIcon={Smile} variant="selectable">
magenta
</Tag>
<Tag emphasis="violet" startIcon={Smile} variant="selectable">
violet
</Tag>
<Tag emphasis="purple" startIcon={Smile} variant="selectable">
purple
</Tag>
Sizes
Choose from four sizes: sm, md, lg, and xl. The default size is md.
LabelLabelLabelLabel
<Tag size="sm" variant="dismissable">
Label
</Tag>
<Tag size="md" variant="dismissable">
Label
</Tag>
<Tag size="lg" variant="dismissable">
Label
</Tag>
<Tag size="xl" variant="dismissable">
Label
</Tag>
States
Disable the tag by setting the disabled prop.
LabelLabel
<Tag variant="dismissable">Label</Tag>
<Tag disabled variant="dismissable">
Label
</Tag>
Shape
Control the shape of the tag with the shape prop. The default shape is square.
LabelLabel
<Tag shape="square">Label</Tag>
<Tag shape="rounded">Label</Tag>
API
<Tag>
v1.25.0
Type
booleanDescription
Applies the active style to a link tag. Honored only when it is rendered as an
anchor via render. This is purely visual; set
aria-current
on the anchor for accessibility.
v1.24.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
| LucideIcon
| ReactNode
Description
lucide-react icon, positioned after
the button text. Can be supplied as a
ReactElement for additional
customization.
Ignored when variant is dismissable, as it is reserved for the
dismiss icon.Type
() => void
Description
Callback fired when the dismiss button is clicked.
Only applicable when variant is
dismissable.v1.24.0
Type
(
selected: boolean,
) => void
Description
Callback fired when the selected state changes. Fires in both controlled
and uncontrolled modes.
Only applicable when variant is
selectable.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
v1.24.0
Type
booleanDescription
Controls the selected state. When omitted, the tag manages its own selected
state internally.
Only applicable when variant is
selectable.v1.17.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
| LucideIcon
| ReactNode
Description
lucide-react icon, positioned before
the button text. Can be supplied as a
ReactElement for additional
customization.Type
| 'selectable'
| 'dismissable'
| 'link'
Description
Governs the interactive style of the tag.
| {
'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
classNameValue
'qui-tag__icon'data-tag-partValue
'start-icon'EndIcon
Note that the endIcon prop is ignored when variant is dismissible.
classNameValue
'qui-tag__icon'data-tag-partValue
'end-icon'Last updated on by Olaf Kappes