Sheen Button
Add a moving highlight to a rounded button on hover. Four styles and three sizes are available.
- Dependencies
- No extra packages
- Size
- 119 lines
- Controls
- 6 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/sheen-button.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/sheen-button.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the sheen-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 Collection" | Visible text. children override it. |
| href | string | — | Renders an anchor when provided. |
| variant | "primary" | "outline" | "ghost" | "solid" | "primary" | Rose fill with glow, champagne hairline, text-only or coffee fill. |
| size | "sm" | "md" | "lg" | "md" | 36, 48 or 56px tall (px-4 / px-7 / px-9); lg uses 14px type. |
| color / hoverColor | string | "#d9aaa1" / "#dfcebc" | Primary fill and its hover; hoverColor also drives outline borders and hover text. |
| ink / paper | string | "#190a0e" / "#f4ece3" | Text on the primary fill (also the ring offset) and text on the other variants. |
| solidColor / ringColor / glow | string | "#48171f" / "#b78179" / "rgb(211 152 88 / 0.7)" | Solid variant fill, focus ring and primary glow. |
| onClick / type / disabled / target | — | — | Forwarded to the element. |