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
Show editor

Sizes

Use size property with sm md or lg.

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.0.0

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