Core / Buttons
Link Button
Navigation styled as an action.
Preview
import { LinkButton } from "@/components/ui/design-system/core/buttons/LinkButton"
<LinkButton href="/pricing">View pricing</LinkButton>Installation
Full library
pnpm install:project /absolute/path/to/your-projectManual install
The guided installer is the next library milestone. This component will be selectable as Core → Buttons → Link Button.
Usage
<LinkButton href="/pricing">View pricing</LinkButton>Adopt to your project
Use LinkButton only when navigation occurs. Use Button for an in-place action, submission, or dialog trigger.
<LinkButton href="/pricing" className="rounded-full px-6 shadow-sm">View pricing</LinkButton>Accessibility
Link text should describe the destination. External links open in a new tab and use rel=noreferrer automatically.
API reference
| Attribute | Type | Default | Required | Purpose |
|---|---|---|---|---|
href | string | — | Yes | Navigation destination. |
children | ReactNode | — | Yes | Visible link content. |
external | boolean | false | No | Adds target=_blank and rel=noreferrer. |
variant | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "primary" | No | Semantic action treatment. |
size | "sm" | "md" | "lg" | "md" | No | Control size. |
radius | "sm" | "md" | "lg" | "xl" | "full" | component default | No | Corner treatment. |
className | string | — | No | Local project styling. |
...anchorProps | AnchorHTMLAttributes<HTMLAnchorElement> | — | No | Native anchor attributes. |