Search

Search components and blocks

Sign in

Arrow Fill Button

Pro

A dark button with a gradient arrow tile. On hover it fills white from the exact spot the pointer entered while the label rolls to a new line of copy and the arrow slides in from the left; it drains back toward wherever the pointer leaves.

pnpm dlx shadcn@latest add @ditherui/arrow-fill-button

Props

hoverLabelReactNodechildren
size"sm" | "md" | "lg""md"
loadingbooleanfalse
fromstring"#8b64ff"
tostring"#6232e0"

When to use the button

Use these buttons for primary and secondary actions where plain color changes feel flat. Variants cover gradient calls to action, bevel, emboss and stitched looks, blur on hover, and a button that swaps its label to confirm an action.

  • Run the shadcn CLI with the name of the button variant you want. Each variant is its own source file you own.

Suggested components