ButtonLink

A link that looks like a button.

import { ButtonLink } from 'components/UI/Button'

Links to site pages

Use this for a call to action that opens another page, such as See pricing. Pass a site path to to.

Pass external to open the link in a new tab. Add an arrow icon to show that it leaves the site.

Links in a ButtonGroup take its appearance, variant, and size, and join edge to edge.

raised · default

flat · toolbars

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Use ButtonLink for navigation and Button for actions. ButtonLink takes the same appearance, variant, and size props, so follow the rules on the Button page.
ButtonLink does not forward a ref, so it cannot be a Base UI render target.

ButtonLink is a site component, not a Base UI component. It also takes the props of an <a> element.

Prop	Type	Default	Description
to	string	–	A site path or a full URL. Required.
appearance	'flat' \| 'raised' \| 'outline'	'raised'	The shape: flat, raised 3D, or outlined.
variant	'primary' \| 'secondary' \| 'danger'	'secondary'	The meaning and color: brand orange, neutral, or destructive red.
size	'sm' \| 'md' \| 'lg'	'md'	Height and text size.
icon	ReactNode	–	An icon next to the text.
iconEnd	ReactNode	–	A second icon after the label.
iconPosition	'start' \| 'end'	'start'	Which side of the text the icon goes on.
external	boolean	false	Opens the link in a new tab.
contextMenu	boolean	true	Shows the link menu on right-click. In a ButtonGroup, the default is false.
event	string	–	A PostHog event to capture when the user clicks.