Link button
A link button goes somewhere. It looks like a button and renders a real link, so open in new tab, copy link and middle-click all work.
Variants
Show code
<KbLinkButton href="/design/components/button" variant="secondary">Read the button guide</KbLinkButton>
<KbLinkButton href="/design/components/button" variant="ghost" size="sm">Replay</KbLinkButton>When to use
- Use it when pressing changes the address: a replay, a record, a settings page.
- Use a button when pressing runs an action in place.
- Say where it goes in a verb and a noun: Watch replay, Open settings.
Import
import { KbLinkButton } from "@/components/ui/KbButton";
<KbLinkButton href="/admin/replay/abc">Watch replay</KbLinkButton>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
href | string | None | Required. Renders an anchor through next/link. |
variant | "primary" | "secondary" | "ghost" | "danger" | "link" | "secondary" | Same looks as the button. |
size | "sm" | "md" | "lg" | "md" | 32, 36 or 40px tall. |
Keyboard and screen readers
- A real anchor, announced as a link; Enter follows it.
- Needs an href. A link without one is a button in disguise and the lint rule rejects it.
- Same focus ring as every control.