Tag

Tags help users categorize, filter, and organize content. Supports close, count, checkbox, avatar, and dot variants.

Sizes

Tags come in three sizes: sm, md, and lg. Each supports dot, avatar, and text.

Small / Medium / Large

Small
LabelLabelLabel
Medium
LabelLabelLabel
Large
LabelLabelLabel

Close / Removable

Pass an onRemove callback to show the X button. Click to remove tags.

Removable Tags

Removable Tags
ReactTypeScriptCSS ModulesOlivia

Count

Add a numeric count badge to any tag with the count prop.

Tags with Count

Tags with Count
Design5Olivia12Active3Notifications99

Checkbox

Enable checkbox mode for selectable tags with checked/unchecked states.

Checkbox Tags

Select Frameworks
ReactVueSvelteAngular

Checkbox + Close

Checkbox + Close
FrontendBackendDevOps

Checkbox + Count

Checkbox + Count
Bugs14Features8Docs3

Avatar Tags

Display user avatars inside tags. Combine with count or onRemove.

Team Members

Team Members
Olivia RhyePhoenix BakerLana SteinerDemi Wilkinson3

Disabled

Disabled tags are visually dimmed and non-interactive.

Disabled Tags

Disabled
LabelWith DotRemovableCheckedCount5

Usage

Import the Tag components and compose them together.

tsx
import { Tag, TagGroup, TagList } from "@/components/ui/Tag";

export default function Example() {
    return (
        <TagGroup label="Technologies">
            <TagList>
                <Tag>React</Tag>
                <Tag dot>Active</Tag>
                <Tag avatarSrc="/avatar.jpg">Olivia</Tag>
                <Tag count={5}>Notifications</Tag>
                <Tag onRemove={() => handleRemove("id")}>Removable</Tag>
                <Tag checkbox checked={true} onCheckedChange={setChecked}>
                    Selectable
                </Tag>
            </TagList>
        </TagGroup>
    );
}

Props

PropTypeDefaultDescription
childrenReactNode—Tag label content.
size"sm" | "md" | "lg""md"Tag size.
dotbooleanfalseShow a colored dot before the label.
avatarSrcstring—URL for an avatar image before the label.
countnumber—Numeric count badge after the label.
onRemove() => void—Callback when the X button is clicked. Shows the remove button.
checkboxbooleanfalseRender as a checkbox tag.
checkedboolean—Controlled checked state (checkbox mode).
onCheckedChange(checked: boolean) => void—Callback when checkbox state changes.
disabledbooleanfalseDisable the tag.
classNamestring—Additional CSS class.