Components / Chip
Chip
Removable pill tag with 5 color variants, press scale animation, keyboard delete.
actions v0.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 |