Getting Started
InstallationVersioning
Integrations
ESLintTailwind CSS
Theming & Patterns
Composition
Polymorphic ComponentsRender Props
Components
OverviewAccordionAlert Banner
AvatarBreadcrumbsButtonButton GroupCard
Beta
CheckboxCheckbox Group
CollapsibleComboboxDialogDividerDrawerFile Input
Beta
Header BarIconIcon ButtonInline Icon ButtonInline Notification
LinkMenuNumber InputPaginationPassword InputPopoverProgressProgress RingRadioSegmented ControlSelectSide NavSliderStepper
Beta
SwitchSwitch Group
TableTabsTagText Area
Text InputToast NotificationTooltipTree

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

Choose from three variants: link, selectable and dismissable.

dismissable
<Tag endIcon={Link2} variant="link">
  link
</Tag>
<Tag variant="selectable">selectable</Tag>
<Tag variant="dismissable">dismissable</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.

<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 three sizes: sm, md and lg. The default size is md.

LabelLabelLabel
<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.

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>

PropTypeDefault
children
React children prop.
ReactNode
defaultSelected
v1.24.0
Initial selected state when the component is uncontrolled. Only applicable when variant is selectable. Ignored when selected is provided.
boolean
false
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'
| 'amber'
| 'blue'
| 'cyan'
| 'green'
| 'lime'
| 'magenta'
| 'orange'
| 'purple'
| 'red'
| 'teal'
| 'violet'
| 'yellow'
| 'kiwi'
'outline-brand'
endIcon
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.
| LucideIcon
| ReactNode
onDismiss
Callback fired when the dismiss button is clicked. Only applicable when variant is dismissable.
    () => void
    onSelectedChange
    v1.24.0
    Callback fired when the selected state changes. Fires in both controlled and uncontrolled modes. Only applicable when variant is selectable.
      (
        selected: boolean,
      ) => void
      radius
      *
      Deprecated in v1.16.0, migrate to shape

      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)
      selected
      v1.24.0
      Controls the selected state. When omitted, the tag manages its own selected state internally. Only applicable when variant is selectable.
      boolean
      shape
      v1.16.0
      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-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'
      children
      Type
      ReactNode
      Description
      React children prop.
      defaultSelected
      v1.24.0
      Type
      boolean
      Description
      Initial selected state when the component is uncontrolled. Only applicable when variant is selectable. Ignored when selected is provided.
      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'
      | 'amber'
      | 'blue'
      | 'cyan'
      | 'green'
      | 'lime'
      | 'magenta'
      | 'orange'
      | 'purple'
      | 'red'
      | 'teal'
      | 'violet'
      | 'yellow'
      | 'kiwi'
      Description
      Governs the color of the tag.
      endIcon
      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.
      onDismiss
      Type
      () => void
      Description
      Callback fired when the dismiss button is clicked. Only applicable when variant is dismissable.
        onSelectedChange
        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.
          radius
          *
          Type
          | 'square'
          | 'rounded'
          Description
          Deprecated in v1.16.0, migrate to shape

          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
          selected
          v1.24.0
          Type
          boolean
          Description
          Controls the selected state. When omitted, the tag manages its own selected state internally. Only applicable when variant is selectable.
          shape
          v1.16.0
          Type
          | 'square'
          | 'rounded'
          Description
          Governs the shape of the tag.
          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.

          StartIcon

          EndIcon

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

          Last updated on by Olaf Kappes
          Tabs
          Text Area
          Examples
          Icons
          Variants
          Controlled State
          Colors
          Sizes
          States
          Shape
          API
          <Tag>
          StartIcon
          EndIcon
          Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.