Library/atoms/Chip

Chip

atom

Compact label for tags, categories, and metadata. v3 chip with variant + color combination.

Added in 0.1.0Last modified in 0.6.0

Live Preview

ThemeDefault Light

Device

Desktop

Props

Prop	Type	Description	Required
color	"default" \| "accent" \| "success" \| "warning" \| "danger"	Semantic color	yes
variant	"primary" \| "secondary" \| "tertiary" \| "soft"	Visual style	yes
size	"sm" \| "md" \| "lg"	Chip size	yes

Usage

import { Chip } from '@qsp-life/particle/free';

<Chip color="accent" variant="soft">Main Office</Chip>
<Chip color="success" variant="primary">Active</Chip>

Import

import { Chip } from '@qsp-life/particle/free';