Edit this page
[?] Component size, gzipped: 45kb

Tag

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

neutralprimarypositivewarningnegative

Tag Variants Prop Type

solidlightoutlined

Tag closeable/non-clickable

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag closeable/clickable

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag in a disabled state

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag non-closeable/non-clickable

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag non-closeable/clickable

neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative
neutralprimarypositivewarningnegative

Tag Custom Color example

custom
custom
custom

Overrides

Additionally, you can fully customize any part of the Tag through the overrides prop. The Tag consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Tag

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Tag API

overrides object = {}

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Action { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ActionIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Text { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

closeable boolean = true

Include or exclude the "x" button and click action.

disabled boolean = false

Disable control from being changed.

isFocused boolean = false

isHovered boolean = false

kind $Keys<typeof TagKind> =

Defines tags look by purpose. Set it to one of KIND[key] values. Defaults to KIND.primary

$KeysObject.freeze(((kindMap, key) => undefined, {}))

variant $Values<typeof TagVariant> =

Defines tags look. Set it to one of VARIANT[key] values. Defaults to VARIANT.light

$ValuesObject.freeze(Object.freeze({ solid: "solid", light: "light", outlined: "outlined" }))

children React$Node

Component or String value for label of tag. Default is empty string.

React$Node

color string

The color theme to be applied to a Tag. Default is KIND.primary.

title string

Text to display in native OS tooltip on long hover.

onActionClick function = () => undefined

onClick handler for the action button element.

function
Event,
React$Node
=> mixed

onActionKeyDown function = () => undefined

keydown handler for the action button element.

function
Event,
React$Node
=> mixed

onClick union = null

onClick handler for the tag. Passing an onClick handler also makes the tag clickable.

One of
null,
Event => mixed

onKeyDown union = null

onkeydown handler for the tag.

One of
null,
Event => mixed

Tag exports

You can import this module like so:

import {Tag} from 'baseui/tag'

It exports the following components or utility functions:

  • Tag
  • StyledRoot
  • StyledAction
  • StyledActionIcon
  • StyledText
  • KIND
  • VARIANT
  • TagKind
  • TagVariant