Components
Accent button
A filled button in a tone other than brand.
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/accent-button.jsonNot a second primary
Use it where a screen genuinely has two filled actions of different kinds — an agent action beside a save, say. A screen with two brand-blue buttons has a hierarchy problem, and reaching for a second colour does not fix it; it just makes the problem colourful.
Ink is the highest-contrast option and works where brand blue would compete with a chart. Violet is the agent tone.
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "brand" | "ink" | "violet" | "danger" | "brand" | The fill. |
| icon | ReactNode | — | Trailing, unlike Button's leading icon. |