Getting Started
Installation
Theming & Patterns
Composition
Polymorphic ComponentsRender Props
Components
Overview
Buttons
ButtonButton GroupIcon ButtonInline Icon Button
Form Controls
CheckboxCheckbox GroupComboboxNumber InputPassword InputRadioSelectSliderSwitchSwitch GroupText AreaText Input
Data Display
AvatarDividerHeader BarIconLinkSegmented ControlTableTag
Overlays
DialogDrawerMenuPopoverTooltip
Disclosure
AccordionBreadcrumbsCollapsiblePaginationSide NavTabsTree
Feedback
Alert BannerInline NotificationProgressProgress RingToast Notification

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>

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="green" startIcon={Smile} variant="selectable">
  green
</Tag>
<Tag emphasis="kiwi" startIcon={Smile} variant="selectable">
  kiwi
</Tag>
<Tag emphasis="yellow" startIcon={Smile} variant="selectable">
  yellow
</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="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>

Radius

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

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

API

<Tag>

PropTypeDefault
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.
| 'outline-brand'
| 'outline-neutral'
| 'neutral'
| 'blue'
| 'cyan'
| 'teal'
| 'green'
| 'kiwi'
| 'yellow'
| 'orange'
| 'red'
| 'magenta'
| 'purple'
'outline-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
onDismiss
Callback fired when the dismiss button is clicked. Only applicable when variant is dismissable.
    () => void
    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'
    children
    Type
    ReactNode
    Description
    React children prop.
    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'
    | 'blue'
    | 'cyan'
    | 'teal'
    | 'green'
    | 'kiwi'
    | 'yellow'
    | 'orange'
    | 'red'
    | 'magenta'
    | 'purple'
    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. Note that this prop is ignored if 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.
      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.

      StartIcon

      EndIcon

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

      Table
      Dialog
      Examples
      Icons
      Variants
      Colors
      Sizes
      States
      Radius
      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.