WUI logo

Tag

Allows user to categorize or organized keywords.

version

5.0.0-alpha.16

install

yarn add @welcome-ui/tag

usage

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

Variants #

Admire these beautiful colors 💅

Basics #
States #
Subs #

Sizes #

Use size property with xs, sm, or md.

List of clickable tags #

When we have a clickable tag, we apply an hover state

One character style #

When we have only one character, we apply same size for the width and height

OnClick #

Simply add a function onClick to catch the action with an hover effect.

OnRemove #

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

Properties #

NameType(s)DefaultRequired
onClick
() => void
onRemove
() => void
size
"xs"
"sm"
"md"
md
variant
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"dark"
"default"
"error"
"info"
"primary"
"secondary"
"success"
"warning"
default
href
string
to
string

Dependencies #

Peer dependencies #

Previous

Table

Next

Alert