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 #
| 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 |