Component size, gzipped: 19kb

Tag

API

Compact UI to display a collection of concise information.

When to use

  • When displaying a list of tags.

Examples

Tag basic Usage

defaultlong text inside the tag

Tag Kinds Prop Type

neutralprimaryaccentpositivewarningnegative

Tag Variants Prop Type

solidlightoutlined

Tag closeable/non-clickable

neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative

Tag closeable/clickable

neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative

Tag in a disabled state

neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative

Tag non-closeable/non-clickable

neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative

Tag non-closeable/clickable

neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative
neutralprimaryaccentpositivewarningnegative

Tag Custom Color example

custom
custom
custom

API

Tag props

NameTypeDescription
children
react node
Visible label.
closeable
boolean
Include or exclude the "x" button and click action.
color
string
The color theme to be applied to a Tag. To make this custom color active, you have to set kind to custom.
disabled
boolean
Disable the tag from being changed.
isFocused
boolean
Is tag focused.
isHovered
boolean
Is tag hovered.
kind
enum
Defines tags look by purpose. Set it to one of KIND[key] values. Defaults to KIND.primary.
onActionClick
function
onClick handler for the action button element.
onActionKeyDown
function
keydown handler for the action button element.
onClick
function
onClick handler for the tag. Passing an onClick handler also makes the tag clickable.
onKeyDown
function
onkeydown handler for the tag.
overrides
custom
Lets you customize all aspects of the component.
title
string
Text to display in native OS tooltip on long hover.
variant
enum
Defines tags look. Set it to one of VARIANT[key] values. Defaults to VARIANT.light.

Tag exports

You can import this module like so:

import {Tag} from 'baseui/tag'

It exports the following components or utility functions: