WUI logo

Tag

The Tag component is a small, interactive UI element used to label, categorize, or filter content. It can display text or icons and often supports actions like deletion or selection. Tags enhance user experience by providing a clear and concise way to organize information, highlight key attributes, or manage items dynamically.

Source@welcome-ui/tag
OverviewProps
import * as React from 'react'
import { Tag } from '@welcome-ui/tag'


const Example = () => {
  return <Tag>Default</Tag>
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/tag
2

Import component:

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

Examples

The default use of Stack will stack its children vertically.

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

When we have only one character, we apply same size for the width and height

OnRemove

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

TableAlert