Tag

The Tag component is a versatile UI element used for displaying labels, categories, and status indicators with multiple variants, colors, and interactive options.

Usage

import { Tag, TagVariant, TagColor, TagSize } from 'blend-v1'

function MyComponent() {
    return (
        <Tag
            text="Success"
            variant={TagVariant.SUBTLE}
            color={TagColor.SUCCESS}
            size={TagSize.MD}
            onClick={() => console.log('tag clicked')}
        />
    )
}

API Reference

Features

• Multiple tag variants (noFill, attentive, subtle)
• Six color themes (neutral, primary, success, error, warning, purple)
• Four sizes (xs, sm, md, lg)
• Two shape options (rounded, squarical)
• Optional click functionality
• Left and right slot support for icons or additional content
• Split tag positioning for special styling
• Responsive design with proper spacing
• Accessible keyboard navigation

Usage Examples

Basic Tag

Simple tag with text content

<Tag text="Label" color={TagColor.PRIMARY} />

Success Tag

Tag with success styling

<Tag
    text="Success"
    variant={TagVariant.SUBTLE}
    color={TagColor.SUCCESS}
    size={TagSize.MD}
/>

Interactive Tag

Clickable tag with custom handler

<Tag
    text="Clickable"
    color={TagColor.PRIMARY}
    onClick={() => console.log('Tag clicked')}
/>

Tag with Icon

Tag with left slot icon

import { CheckCircle } from 'lucide-react'
;<Tag
    text="Completed"
    color={TagColor.SUCCESS}
    leftSlot={<CheckCircle size={12} />}
/>

Warning Tag

Tag with warning styling and right slot

import { AlertTriangle } from 'lucide-react'
;<Tag
    text="Warning"
    variant={TagVariant.ATTENTIVE}
    color={TagColor.WARNING}
    rightSlot={<AlertTriangle size={12} />}
/>

Large Rounded Tag

Tag with large size and rounded shape

<Tag
    text="Featured"
    color={TagColor.PURPLE}
    size={TagSize.LG}
    shape={TagShape.ROUNDED}
/>

No Fill Tag

Tag with no background fill

<Tag
    text="Outline"
    variant={TagVariant.NO_FILL}
    color={TagColor.NEUTRAL}
    size={TagSize.SM}
/>

Split Tag

Tag with split positioning for special styling

<Tag text="Split" color={TagColor.ERROR} splitTagPosition="left" />