WUI logo

Tag

Allows user to categorize or organized keywords.

version

4.2.0

install

yarn add @welcome-ui/tag

usage

import { Tag } from '@welcome-ui/tag'

Variants #

Admire these beautiful colors 💅

Basics #
<Tag>Default</Tag>
<Tag variant="primary">Primary</Tag>
<Tag variant="secondary">Secondary</Tag>
<Tag variant="dark">Dark</Tag>
States #
<Tag variant="success">Success</Tag>
<Tag variant="error">Error</Tag>
<Tag variant="warning">Warning</Tag>
<Tag variant="info">Info</Tag>
Subs #
<Tag variant="1">1</Tag>
<Tag variant="2">2</Tag>
<Tag variant="3">3</Tag>
<Tag variant="4">4</Tag>
<Tag variant="5">5</Tag>
<Tag variant="6">6</Tag>
<Tag variant="7">7</Tag>

Sizes #

Use size property with xs, sm, md or lg.

<Tag size="xs">
Tiny
</Tag>
<Tag size="sm">
Small
</Tag>
<Tag size="md">
Medium
</Tag>
<Tag size="lg">
Large
</Tag>

One character style #

When we have only one character, we apply same size for the width and height (it implicitely sets shape prop to square)

<Tag size="sm">
1
</Tag>
<Tag size="md">
1
</Tag>
<Tag size="lg">
1
</Tag>

Shape #

Set shape prop to square to get a square no matter the content.

<Tag size="lg" shape="square">
1
</Tag>
<Tag size="lg" shape="square" w={50}>
Long text
</Tag>

Set shape prop to circle to set a border-radius 50%.

<Tag size="lg" shape="circle">
1
</Tag>

OnRemove #

Simply add a function onRemove to reveal a cross icon with a remove action (or other).

function() {
const [isHide, setHide] = React.useState(false)
return isHide ? (
<Text fontSize="body3" fontWeight="bold" color="danger.500" m={0}>
Tag removed
</Text>
) : (
<Tag onRemove={() => setHide(true)}>Example of remove tag</Tag>
)
}

Properties #

NameType(s)DefaultRequired
onRemove
() => void
size
"xs"
"sm"
"md"
"lg"
md
variant
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"dark"
"default"
"error"
"info"
"primary"
"secondary"
"success"
"warning"
default
shape
"circle"
"square"

Dependencies #

Peer dependencies #

Previous

Table

Next

Alert