Chip
Interactive documentation for the chip component. Change props in the playground, inspect size variants, and copy the generated example.
Preview
10
Code
<Chip
type="number"
size="4xl"
label="10">
<PrimaryButton>Test</PrimaryButton>
</Chip>Inline
Examples of chips rendered inline inside PrimaryButton content.
Props
This table matches the current ChipProps interface.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'blank' | 'number' | 'label' | 'blank' | Controls the chip shape and content style. blank renders a dot, number renders a rounded counter, label renders a pill label. |
| color | 'basil' | 'midnight' | 'basil' | Visual color variant. basil uses bg-basil-500, midnight uses bg-midnight-950. Both use cocaine text. |
| size | Size | 'm' | Controls chip width, height, padding, and text size. Supports the shared Size scale from 3xs to 4xl. |
| label | string | number | undefined | Chip content. For number type, values greater than 99 are replaced with the flame icon. |
| inset | boolean | false | Removes the default translate offset. Useful when the chip is rendered inline or manually positioned. |
| inline | boolean | false | Removes absolute positioning so the chip can be used inside inline content. |