Arrow Button

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

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 />

Prop	Type	Default	Description
`...props` Every prop of the shadcn/ui Button, including variant and size.	`ComponentProps<typeof Button>`	—	Every prop of the shadcn/ui Button, including variant and size.

<ArrowLink />

Prop	Type	Default	Description
`variant` Button style applied to the link.	`"default" \| "outline" \| "secondary" \| "ghost" \| "link"`	"default"	Button style applied to the link.
`size` Button size applied to the link.	`"default" \| "sm" \| "lg"`	"default"	Button size applied to the link.
`...props` Any anchor attribute, such as href.	`ComponentProps<"a">`	—	Any anchor attribute, such as href.