Chip

Removable pill tag with 5 color variants, press scale animation, keyboard delete.

actionsv0.5.0

Playground

Examples

Variants

<cg-stack direction="row" gap="sm"><cg-chip label="Default"></cg-chip><cg-chip label="Success" variant="success"></cg-chip><cg-chip label="Warning" variant="warning" removable></cg-chip><cg-chip label="Error" variant="error" removable></cg-chip><cg-chip label="Accent" variant="accent"></cg-chip></cg-stack>

Import

import { CgChip } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-chip';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`label`	string	—	Chip text
`variant`	"default"\|"success"\|"warning"\|"error"\|"accent"	"default"	Color
`removable`	boolean	false	Show X button
`size`	"sm"\|"md"	"md"	Size
`rounded`	"none" \| "sm" \| "md" \| "lg" \| "full"	"full"	Border radius variant

Events

Event	Detail	Description
`cg-chip-remove`	{label}	Remove clicked