Split Tag

The SplitTag component is a specialized tag variant that can be split into multiple sections, useful for displaying complex labels or status indicators.

View on GitHub Report an issue View Storybook

Usage

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

function MyComponent() {
    return (
        <SplitTag
            primaryTag={{
                text: 'Status',
                variant: TagVariant.NO_FILL,
                color: TagColor.PRIMARY,
            }}
            secondaryTag={{
                text: 'Active',
                variant: TagVariant.ATTENTIVE,
                color: TagColor.SUCCESS,
            }}
            size={TagSize.MD}
            shape={TagShape.ROUNDED}
        />
    )
}

API Reference

Prop Name	Type	Default
primaryTag	TagConfig	Required
secondaryTag	TagConfig	Optional
leadingSlot	ReactNode
trailingSlot	ReactNode
size	TagSize	SM
shape	TagShape	SQUARICAL

TagConfig Properties

Prop Name	Type	Default
text	string	Required
variant	TagVariant	SUBTLE
color	TagColor	PRIMARY
onClick	() => void

Features

Split design with primary and secondary sections
Multiple color schemes (neutral, primary, success, error, warning, purple)
Three visual variants (no fill, attentive, subtle)
Four sizes (xs, sm, md, lg)
Two shapes (rounded, squarical)
Optional leading and trailing slots
Click handlers for interactive tags
Seamless border radius handling for split sections

Usage Examples

Basic Split Tag

Simple split tag with primary and secondary sections

<SplitTag
    primaryTag={{
        text: 'Status',
        variant: TagVariant.NO_FILL,
        color: TagColor.PRIMARY,
    }}
    secondaryTag={{
        text: 'Active',
        variant: TagVariant.ATTENTIVE,
        color: TagColor.SUCCESS,
    }}
/>