ArrowLink
A text link with the navigation arrow, for See all, Learn more and moving through content.
import { ArrowLink } from "@butteryui/react";Demo
When to use it
Use it for
- A See all at the foot of a list or a menu
- Learn more under a feature, or Back to a parent page
Not for
- A link inside a sentence: use a plain link
- An action that changes something: use Button
- A call to action that should stand out: use Button with arrow
Examples
Back link
A way back to the page above, with the arrow pointing back.
See all
A short list of recent orders with See all at its foot, and a help link that leaves the app.
Recent orders
Blue Door Café, 12 bags
Rosa Delgado, 2 bags
Little Fern Coffee, 8 bags
Week by week
A roast schedule paged a week at a time, with arrow links rendered as buttons through asChild.
Week of Oct 12
Harbor blend
Guji natural
Night shift
Variants and states
Forward and back
Hover or focus a link: the chevron grows a stem, and the link keeps its width.
Props
ArrowLink
| Prop | Type | Default | Description |
|---|---|---|---|
arrow | "forward" | "back" | "external" | "forward" | Which way the arrow points: "forward" (the default) after the label, "back" before it, or
"external", an external-link icon after the label that holds still, for a link that leaves the app. |
asChild | boolean | Render the single child element (such as a router's link) as the link, with the arrow merged in. |
It also takes ComponentPropsWithRef<"a">.
Accessibility
A native link (or the element you give it with asChild), named by its label; the arrow is hidden from assistive technology. Keyboard focus shows the focus ring and an underline.
| Keys | What they do |
|---|---|
| Enter | Follows the link |
| Enter or Space | Presses it, when it's a button given through asChild |
Motion
It answers the pointer and keyboard focus within `--bt-dur-fast`, such as an arrow growing its stem, without changing size.
With reduced motion: On hover or focus the chevron becomes the arrow at once, without the nudge.
Layout
It's as wide as its label and arrow, never wider than its container, where a long label truncates with an ellipsis and shows in full as its title; the arrow growing never changes its width. Its hit area is the label's line plus 2px above and below, and as a button it's at least --bt-h-sm (28px) tall.
Related
See it in the roastery demo's wholesale. See it in the Halfmoon shop demo.