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

Github

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.

Github

Sizes

Use size property with md or lg (default).

Github

With icon

Add an icon prop to display an icon alongside the tag text.

Github

AI

Use the ai prop to automatically display a sparkles icon, and specific outline gradient colors. When ai is set to true, it overrides any custom icon.

Github

List of clickable tags

When we have a clickable tag, we apply an hover state.

Github

One character

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

Github

OnRemove

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

Github

Disabled

Use the disabled prop to disable tag interaction.

Github

Table Visually hidden