Link Buttons

Link buttons look like buttons and behave like normal links. Each button requires an href attribute.

Basic syntax

Markdown

:::link-button[Get Started](href="/start-here/getting-started/")
:::

Result

Get Started

→ A primary-colored button appears with the text "Get Started" linking to the getting-started page.

Variants

Set the variant attribute to change the button style:

Markdown

:::link-button[Primary](href="/docs/" variant="primary")
:::
:::link-button[Secondary](href="/docs/" variant="secondary")
:::
:::link-button[Outline](href="/docs/" variant="outline")
:::
:::link-button[Ghost](href="/docs/" variant="ghost")
:::
:::link-button[Minimal](href="/docs/" variant="minimal")
:::

Result

Primary Secondary Outline Ghost Minimal

Variant	Description
`primary`	Solid accent-colored background. Default.
`secondary`	Muted background color.
`outline`	Transparent with a border.
`ghost`	Transparent with no border. Hover reveals background.
`minimal`	Text-only, no background or border.

Icon

Add an icon with the icon attribute. Control placement with iconPlacement:

Markdown

:::link-button[View on GitHub](href="https://github.com/example" icon="github" iconPlacement="start")
:::

Result

View on GitHub

→ A GitHub icon appears before the button text.

Value	Description
`end`	Icon after the text. Default.
`start`	Icon before the text.

An icon-only button (no label text) receives a compact square layout:

Markdown

:::link-button(href="https://github.com/example" icon="github")
:::

Result

Size

Set size to sm or lg:

Markdown

:::link-button[Small](href="/docs/" size="sm")
:::
:::link-button[Large](href="/docs/" size="lg")
:::

Result

Small Large

Layout and state

Add block="true" for a full-width button, or center="true" to center it. Add disabled="true" for a grayed-out state with aria-disabled="true".

External URLs (http:// or https://) automatically open in a new tab. Override with new-tab="false".

Button groups

Wrap multiple link buttons in :::link-button-group for horizontal alignment:

Markdown

:::link-button-group
:::link-button[Get Started](href="/start-here/getting-started/" variant="primary")
:::
:::link-button[Kitchen Sink](href="/extensions/kitchen-sink/" variant="outline")
:::
:::/link-button-group

Result

Get Started Kitchen Sink

→ Two buttons appear side by side with consistent spacing.

:::link-button-group takes no attributes. Each nested :::link-button block controls its own style and content. Close the group with :::/link-button-group. Each button closes with :::; a button opened with four or more colons needs at least as many colons on its own closing fence. When a nested button has no href, Sarde drops that button and renders the group around the remaining buttons.

Body text as label

When no label is provided in square brackets, body text between the fences becomes the button label:

Markdown

:::link-button(href="/docs/")
Read the documentation
:::

Result

Read the documentation

If both a bracket label and body text are present, the bracket label takes precedence.

Options

Option	Syntax	Default	Description
Label	`[Text]` or body content	—	Button text.
`href`	`href="/path/"`	—	Link destination. Required.
`variant`	`variant="secondary"`	`"primary"`	Visual style.
`icon`	`icon="name"`	—	Lucide icon name.
`iconPlacement`	`iconPlacement="start"`	`"end"`	Icon position relative to text.
`size`	`size="sm"` or `size="lg"`	(default)	Button size.
`block`	`block="true"`	`false`	Full-width button.
`center`	`center="true"`	`false`	Center the button horizontally.
`disabled`	`disabled="true"`	`false`	Disabled appearance and `aria-disabled`.
`new-tab`	`new-tab="true"` or `"false"`	Auto (external)	Override new-tab behavior.

Edge cases

A link button without href is silently ignored and produces no output.
Links with blocked schemes (javascript:, data:, vbscript:) are suppressed.
An unrecognized variant value falls back to "primary".
An unrecognized size value is ignored (default size is used).