Expanding Arrow Button

A pill button that makes room for an arrow on hover or keyboard focus.

Dependencies: No extra packages
Size: 115 lines
Controls: 5 controls

example.tsx

1import { ExpandingArrowButton } from "@/components/onycx/expanding-arrow-button";23export default function Example() {4  return (5    <ExpandingArrowButton6      label={"Explore the Collection"}7      background={"#f7f3ed"}8      hoverBackground={"#f4c430"}9      color={"#0c0a09"}10      size={"md"}11    />12  );13}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/expanding-arrow-button.json

1 · Dependencies

None beyond React and Tailwind.

2 · Copy the source

components/onycx/expanding-arrow-button.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the expanding-arrow-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.
background / hoverBackground	string	"#f7f3ed" / "#f4c430"	Resting and active fills; the active fill is also the focus ring.
color	string	"#0c0a09"	Label and arrow colour.
size	"sm" \| "md" \| "lg"	"md"	md is the original px-12 py-6 text-lg (pr-20 open); sm and lg scale the same proportions.
onClick / type / disabled / target	-	—	Forwarded to the element.