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 #
Name | Type(s) | Default | Required |
---|---|---|---|
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" |