A text link or button whose underline grows from the center while an arrow nudges forward. After it is used, the text shifts to a visited color.
From the journal
Release notes, guides and the odd opinion about easing curves.
npx shadcn@latest add https://hyperblur.dev/r/button-underline-grow.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-underline-grow.tsx.
import { ButtonUnderlineGrow } from "@/components/hyperblur/button-underline-grow"
<ButtonUnderlineGrow href="/changelog">Read the changelog</ButtonUnderlineGrow>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Link text. |
| href | string | Renders an anchor when set, a button otherwise. | |
| target | string | Anchor target. With _blank, rel defaults to noopener noreferrer. | |
| variant | "accent" | "plain" | "accent" | Accent tints the text with the accent color, plain keeps it light. |
| accent | string | "#2f7bff" | Brand color used for fills, borders, rings and the focus outline. |
| visitedColor | string | "#b69cff" | Text and underline color after the link was used. Anchors also react to the browser visited state. |
| size | "sm" | "md" | "lg" | "md" | Height, padding and font size preset. |
| arrow | boolean | ReactNode | true | Show the default arrow, hide it with false, or pass your own icon. |
| idle | boolean | false | Breathes the underline and arrow on their own while idle. Useful for previews. |
| loading | boolean | false | Shows a spinner, sets aria-busy and ignores clicks while true. |
| disabled | boolean | false | Dims the button and removes it from interaction. |