Button Link
A semantic anchor with full button styling, for internal and external links with icons and block layout.
import { ButtonLink } from "@plexui/ui/components/Button";Examples
Overview
Internal link
External link
Colors & variants
Sizing & roundness
Icons
size
iconSize
Block
Disabled
View API Keys
API
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content inside the link button |
color | "primary" | "secondary" | "danger" | "success" | "info" | "discovery" | "caution" | "warning" | "primary" | Visual color |
variant | "solid" | "soft" | "outline" | "ghost" | "solid" | Style variant |
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Control height and typography scale |
gutterSize | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | — | Override horizontal padding |
iconSize | "sm" | "md" | "lg" | "xl" | "2xl" | — | Override icon size |
href | string | — | Link URL |
to | string | object | — | Router link destination (internal) |
as | ComponentType | — | Link component override (e.g. Next Link) |
external | boolean | — | Force external-link behavior |
opticallyAlign | "start" | "end" | — | Apply optical negative margin alignment |
block | boolean | false | Full width |
pill | boolean | false | Fully rounded |
disabled | boolean | false | Disable link |
disabledTone | "relaxed" | — | Use relaxed visual tone for disabled state |
className | string | — | Custom classes for the root element |
onClick | (event: MouseEvent) => void | — | Called on click, unless disabled |
Configure your Router
Provider
// In the root of your app
import { PlexUIProvider } from "@plexui/ui/components/PlexUIProvider"
import { Link } from "react-router"
// Set up types
declare global {
interface PlexUIConfig {
LinkComponent: typeof Link
}
}
// Wrap your app in PlexUIProvider and pass in your router's Link component.
export function App() {
return (
<PlexUIProvider linkComponent={Link}>
{/* other providers... */}
</PlexUIProvider>
)
}
// elsewhere - everything just works!
<ButtonLink to={{ pathname: "/help" }} prefetch="intent">
Get Help
</ButtonLink>Component-level
You can also pass your Link component to the as prop.
import Link from "next/link"
<ButtonLink as={Link} href="/dashboard">
View Dashboard
</ButtonLink>Styling
Button Link reads these component tokens. Override them at any scope to restyle it:
--button-font-weight: font weight (defaultvar(--font-weight-medium))--button-gap-lg: gap lg (default6px)--button-gap-md: gap md (default4px)--button-gap-sm: gap sm (default3px)