Tag

Install and import #

yarn add @welcome-ui/tag @xstyled/styled-components @xstyled/system react react-dom styled-components

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

Variants #

Admire these beautiful colors 💅

Basics #

Default
Primary
Secondary
Dark
Show editor

States #

Success
Error
Warning
Info
Show editor

Subs #

1
2
3
4
5
6
7
Show editor

Sizes #

Use size property with xs sm md or lg.

Tiny
Small
Medium
Large
Show editor

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)

1
1
1
Show editor

Shape #

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

1
Long text
Show editor

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

1
Show editor

OnRemove #

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

Example of remove tag
Show editor

Properties #

Dependencies #

• - @welcome-ui/icons.cross
  ^3.4.0
• - @welcome-ui/system
  ^3.0.0
• - @welcome-ui/utils
  ^3.4.3

Peer dependencies #

• - @xstyled/styled-components
  ^2.2.3
• - @xstyled/system
  ^2.2.3
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1