Text Roll Button

On hover and focus, the label rolls up and an identical copy takes its place.

Installation#

pnpm dlx shadcn@latest add @balick/text-roll-button

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

import { TextRollButton } from "@/components/ui/text-roll-button"

export function Demo() {
  return <TextRollButton>Book a demo</TextRollButton>
}

Prop	Type	Default	Description
`children` The label. Keep it to plain text.	`ReactNode`	—	The label. Keep it to plain text.
`...props` Every prop of the shadcn/ui Button.	`ComponentProps<typeof Button>`	—	Every prop of the shadcn/ui Button.