Tag

Tags allow users to categorize content. They can represent keywords or people and are grouped to describe an item or search request.

import {QTag} from "@qui/react"

Examples

Showcase

Customize tags using properties like readonly and checked. See the API section for each available property.

Enabled

Read Only

Disabled

import {ReactNode} from "react"

import {QTag} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <div className="grid justify-center py-1">
      <div className=" grid grid-flow-row grid-rows-3 gap-x-8 gap-y-3 sm:grid-flow-col sm:grid-cols-3">
        <div className="text-primary q-font-heading-xs">Enabled</div>
        <QTag label="Default" />
        <QTag checked label="Default" />

        <div className="text-primary q-font-heading-xs">Read Only</div>
        <QTag label="Default" readOnly />
        <QTag checked label="Default" readOnly />

        <div className="text-primary q-font-heading-xs">Disabled</div>
        <QTag disabled label="Default" />
        <QTag checked disabled label="Default" />
      </div>
    </div>
  )
}

Size

Three sizes are available: s, m (default), and l

import {ReactNode} from "react"

import {QTag} from "@qui/react"

export default function Size(): ReactNode {
  return (
    <div className="grid justify-center">
      <div className=" flex flex-1 flex-col gap-4">
        <div>
          <QTag dismissable label="Small" size="s" />
        </div>
        <div>
          <QTag dismissable label="Medium" />
        </div>
        <div>
          <QTag dismissable label="Large" size="l" />
        </div>
      </div>
    </div>
  )
}

Toggle

Toggleable tags can be turned on and off when selected by the user.

import {ReactNode} from "react"

import {QTag} from "@qui/react"

export default function Toggle(): ReactNode {
  return (
    <div className="grid justify-center">
      <QTag label="Toggleable Tag" toggleable />
    </div>
  )
}

Multiline

Use the stretch property in combination with CSS flexbox to evenly distribute the tabs based on the available horizontal space.

import {ReactNode} from "react"

import {QTag} from "@qui/react"

export default function Multiline(): ReactNode {
  return (
    <div className="grid justify-center">
      <div className="flex w-[300px] flex-wrap gap-1">
        <QTag label="Machine Learning" stretch />
        <QTag label="Neural Networks" stretch />
        <QTag label="Robotics" stretch />
        <QTag label="Distributed Systems" stretch />
        <QTag label="AI Systems" stretch />
        <QTag label="Fuzzy Logic" stretch />
        <QTag label="Language Processing" stretch />
      </div>
    </div>
  )
}

Controlled

Use the checked and onToggle props to control the checked statue of the tag, use onDismiss to handle tag dismiss event.

Toggle:false

Dismisssed:false

import {ReactNode, useState} from "react"

import {XSquare} from "lucide-react"

import {QTag, useNotification} from "@qui/react"

export default function Controlled(): ReactNode {
  const [checked, setChecked] = useState(false)

  const [dismissed, setDismissed] = useState(false)

  const {notify} = useNotification()

  return (
    <div className="grid  gap-4">
      <div className=" grid w-[250px] grid-cols-2 items-center gap-x-8 gap-y-4">
        <div className="flex gap-1">
          <span className="text-primary q-font-metadata-lg">Toggle:</span>
          <span className="text-primary q-font-metadata-lg">
            {String(checked)}
          </span>
        </div>
        <div className="flex gap-1">
          <span className="text-primary q-font-metadata-lg">Dismisssed:</span>
          <span className="text-primary q-font-metadata-lg">
            {String(dismissed)}
          </span>
        </div>
        <QTag
          checked={checked}
          label="Togglable"
          onChange={(event, value) => setChecked(!value)}
          toggleable
        />
        <QTag
          dismissable
          label="Dismissable"
          onDismiss={(event, value) => {
            setDismissed(value)
            {
              notify({
                notification: {
                  color: "negative",
                  icon: XSquare,
                  label: (
                    <span>
                      <span>Dismissed Triggered</span>
                    </span>
                  ),
                },
              })
            }
          }}
        />
      </div>
    </div>
  )
}

API

Props

Name & Description	Option(s)	Default
label ^* The tag's text label.	string
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'button'
checked Used to manually control checked state. Does nothing if toggleable=false	boolean	false
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
disabled If true, the component is disabled.	boolean	false
dismissable Render a close icon that dismisses the tag when clicked.	boolean	false
onChange Callback fired when user clicks on the tag when toggleable is `true`.	( event: SyntheticEvent, value: boolean, ) => void
onDismiss Callback fired when user clicks on the tag when dismissable is `true` and toggleable is `true`.	( event: MouseEvent, value: boolean, ) => void
readOnly If true, the component is read-only.	boolean	false
size The size of the tag.	\| 's' \| 'm' \| 'l'	"m"
stretch Use the stretch property in combination with CSS flexbox to evenly distribute the tabs based on the available horizontal space.	boolean	false
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties
toggleable If true, the component is toggleable between on/off states.	boolean	false

label

Type

string

Description

The tag's text label.

Type

| ElementType
| ComponentType

Default

'button'

Description

The component used for the root node. It can be a React component or element.

checked

Type

boolean

Default

false

Description

Used to manually control checked state. Does nothing if toggleable=false

className

Type

string

Description

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

disabled

Type

boolean

Default

false

Description

If true, the component is disabled.

dismissable

Type

boolean

Default

false

Description

Render a close icon that dismisses the tag when clicked.

onChange

Type

(
  event: SyntheticEvent,
  value: boolean,
) => void

Description

Callback fired when user clicks on the tag when toggleable is true.

onDismiss

Type

(
  event: MouseEvent,
  value: boolean,
) => void

Description

Callback fired when user clicks on the tag when dismissable is true and toggleable is true.

readOnly

Type

boolean

Default

false

Description

If true, the component is read-only.

size

Type

| 's'
| 'm'
| 'l'

Default

"m"

Description

The size of the tag.

stretch

Type

boolean

Default

false

Description

Use the stretch property in combination with CSS flexbox to evenly distribute the tabs based on the available horizontal space.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

toggleable

Type

boolean

Default

false

Description

If true, the component is toggleable between on/off states.

Tabs

Text Area