Arrow Button

A button or link whose arrow nudges forward on hover and focus.

Dependencieslucide-react

Installation#

pnpm dlx shadcn@latest add @balick/arrow-button

Or pass the full URL: https://ui.balick.me/r/arrow-button.json

Usage#

import { ArrowButton, ArrowLink } from "@/components/ui/arrow-button"

export function Actions() {
  return (
    <>
      <ArrowButton>Get started</ArrowButton>
      <ArrowLink href="/docs" variant="outline">Read the docs</ArrowLink>
    </>
  )
}

Props#

<ArrowButton />

PropTypeDefault
...props

Every prop of the shadcn/ui Button, including variant and size.

ComponentProps<typeof Button>—

<ArrowLink />

PropTypeDefault
variant

Button style applied to the link.

"default" | "outline" | "secondary" | "ghost" | "link""default"
size

Button size applied to the link.

"default" | "sm" | "lg""default"
...props

Any anchor attribute, such as href.

ComponentProps<"a">—