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 md or lg (default).

With icon

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

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.

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

Disabled

Use the disabled prop to disable tag interaction.