Tag

import {Tag} from "@qualcomm-ui/react/tag"

Examples

Icons

Icons are supplied using the startIcon and endIcon props.

Brand

<Tag emphasis="neutral" startIcon={Plus}>
  Label
</Tag>
<Tag emphasis="neutral" endIcon={Plus}>
  Label
</Tag>

Variants

Choose from three variants: link, selectable and dismissable.

Brand

<Tag endIcon={Link2} variant="link">
  link
</Tag>
<Tag variant="selectable">selectable</Tag>
<Tag variant="dismissable">dismissable</Tag>

Colors

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

Brand

<Tag emphasis="brand">Label</Tag>
<Tag emphasis="outline-neutral">Label</Tag>
<Tag emphasis="neutral">Label</Tag>

Sizes

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

Brand

<Tag size="sm" variant="dismissable">
  Label
</Tag>
<Tag size="md" variant="dismissable">
  Label
</Tag>
<Tag size="lg" variant="dismissable">
  Label
</Tag>

States

Disable the tag by setting the disabled prop.

Brand

<Tag variant="dismissable">Label</Tag>
<Tag disabled variant="dismissable">
  Label
</Tag>

Radius

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

Brand

<Tag radius="square">Label</Tag>
<Tag radius="rounded">Label</Tag>

Prop	Type	Default
children React children prop.	ReactNode
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.	\| 'brand' \| 'outline-neutral' \| 'neutral'	'brand'
endIcon lucide-react icon, positioned after the button text. Can be supplied as a `ReactElement` for additional customization. Note that this prop is ignored if variant is `dismissable`, as it is reserved for the dismiss icon.	\| LucideIcon \| ReactNode
radius Governs the shape of the tag.	\| 'square' \| 'rounded'	'square'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size Governs the size of the text, icons, spacing, and padding.	\| 'sm' \| 'md' \| 'lg'	'md'
startIcon lucide-react icon, positioned before the button text. Can be supplied as a `ReactElement` for additional customization.	\| LucideIcon \| ReactNode
variant Governs the interactive style of the tag.	\| 'link' \| 'selectable' \| 'dismissable'

lucide-react icon, positioned after the button text. Can be supplied as a ReactElement for additional customization. Note that this prop is ignored if variant is dismissable, as it is reserved for the dismiss icon.

radius

Type

| 'square'
| 'rounded'

Description

Governs the shape of the tag.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

| 'sm'
| 'md'
| 'lg'

Description

Governs the size of the text, icons, spacing, and padding.

startIcon

Type

| LucideIcon
| ReactNode

Description

lucide-react icon, positioned before the button text. Can be supplied as a ReactElement for additional customization.

variant

Type

| 'link'
| 'selectable'
| 'dismissable'

Description

Governs the interactive style of the tag.

Attribute / Property	Value
`className`	'qui-tag__root'
`data-disabled`
`data-emphasis`	\| 'brand' \| 'outline-neutral' \| 'neutral'
`data-part`	'root'
`data-radius`	\| 'square' \| 'rounded'
`data-scope`	'tag'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`data-variant`	\| 'link' \| 'selectable' \| 'dismissable'

className

Value

'qui-tag__root'

data-disabled

Value

data-emphasis

Value

| 'brand'
| 'outline-neutral'
| 'neutral'

data-part

Value

'root'

data-radius

Value

| 'square'
| 'rounded'

data-scope

Value

'tag'

data-size

Value

| 'sm'
| 'md'
| 'lg'

data-variant

Value

| 'link'
| 'selectable'
| 'dismissable'

StartIcon

Attribute / Property	Value
`className`	'qui-tag__icon'
`data-part`	'start-icon'
`data-scope`	'tag'
`data-size`	\| 'sm' \| 'md' \| 'lg'

className

Value

'qui-tag__icon'

data-part

Value

'start-icon'

data-scope

Value

'tag'

data-size

Value

| 'sm'
| 'md'
| 'lg'

EndIcon

Note that the endIcon prop is ignored when variant is dismissible.

Attribute / Property	Value
`className`	'qui-tag__icon'
`data-part`	'end-icon'
`data-scope`	'tag'
`data-size`	\| 'sm' \| 'md' \| 'lg'

className

Value

'qui-tag__icon'

data-part

Value

'end-icon'

data-scope

Value

'tag'

data-size

Value

| 'sm'
| 'md'
| 'lg'

Table

Dialog

Tag

Examples

Icons

Variants

Colors

Sizes

States

Radius

API

<Tag>

StartIcon

EndIcon