Split Icon Button
A button with a separate icon cell. On hover, the button lifts and the icon shifts toward the corner.
- Dependencies
- No extra packages
- Size
- 98 lines
- Controls
- 4 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/split-icon-button.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/split-icon-button.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the split-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 | "Start a project" | Visible text. children override it. |
| href | string | — | Renders an anchor when provided. |
| variant | "outline" | "accent" | "light" | "outline" | 27% white hairline on dark (hover: 4% fill, 50% border), accent fill with ink text, or an extra paper fill. |
| icon | "arrow" | "plus" | "download" | "arrow" | Glyph in the icon cell. |
| accent | string | "#ff652e" | Accent fill and focus outline; the accent hover mixes in 20% white (#ff8458 for the default). |
| onClick / type / disabled / target | — | — | Forwarded to the element. |