Components
Inline, link and suggestion chips
Three chips for three jobs.
MonTueWedThuFri
Your next Renewal call — 30 min is on Thursday.
notion.com/legal/enterprise-agreement-2024Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/chip.jsonInline chip
24px tall, so it does not disturb the line box it lands in. For an entity mentioned mid-sentence — a meeting, a person, a contract.
Link chip
On bg/brand-tint with brand ink, truncating from the end. A URL that wraps
across two lines is unreadable and unclickable in equal measure.
Suggestion chip
A card rather than a pill, because the text is a whole question and needs two lines. It is the only chip that is always an action.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | — | All three. Leading. |
| href | string | — | LinkChip. |
| onClick | () => void | — | SuggestionChip. |