Tag
Allows user to categorize or organized keywords.
version
5.1.0
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 #
Name | Type(s) | Default | Required |
---|---|---|---|
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 |