Welcome UI

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.

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

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

export default Example

Examples

The default use of Stack will stack its children vertically.

Variants

Use the variant prop to change the appearance of the tag.

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