Pill Icon Button
A link or button with a round icon that rotates on hover. Choose from four styles and three sizes.
- Dependencies
- No extra packages
- Size
- 158 lines
- Controls
- 6 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/pill-icon-button.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/pill-icon-button.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the pill-icon-button.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Explore the work" | Visible text. children override it. |
| href | string | — | Renders an anchor when provided. |
| variant | "dark" | "light" | "outline" | "accent" | "dark" | dark: ink pill, paper disc. light: paper pill, ink disc. accent: accent pill that turns paper on hover. outline: hairline pill with an accent disc. |
| size | "sm" | "md" | "lg" | "md" | 46px (advisory nav), 54px (studio CTA) or 62px (hero); all meet the 44px target. |
| icon | "arrow" | "plus" | "play" | "arrow" | 1.5px-stroke glyph inside the disc; the diagonal arrow points right once turned. |
| accent | string | "#ff4d27" | Hover fill, accent surface, outline disc and focus ring. |
| spin | boolean | true | Rotate the disc 45° on hover. |
| onClick / type / disabled / target | — | — | Forwarded to the element. |