LinkButton

Styled anchor rendered as a button — primary, secondary, or minimal. Use for calls-to-action, section footers, and cross-page navigation prompts.

<LinkButton> is a semantic <a> tag styled to look like a button. Pick the variant by importance: primary for the one action on the page that matters most, secondary for supporting options, minimal when a button-shaped link would shout too loud.

Three variants

Get started Browse components External link

import { LinkButton } from '@publier/shell/components';

<LinkButton href="/docs/get-started/installation">Get started</LinkButton>

<LinkButton href="/docs/components" variant="secondary">
  Browse components
</LinkButton>

<LinkButton
  href="https://example.com"
  variant="minimal"
  target="_blank"
  rel="noopener noreferrer"
>
  External link
</LinkButton>

Icon placement

The label slot accepts any inline children — including an inline SVG. iconPlacement controls whether the icon renders before ("start") or after ("end") the label text. Put the text and icon as separate children; the component reorders them via flex-direction.

Back to docs Next: Get started

<LinkButton href="/docs" iconPlacement="start">
  <svg width="14" height="14" viewBox="0 0 16 16" …><path d="M13 8H3m4-4-4 4 4 4"/></svg>
  <span>Back to docs</span>
</LinkButton>

<LinkButton href="/docs/get-started/introduction" iconPlacement="end">
  <span>Next: Get started</span>
  <svg width="14" height="14" viewBox="0 0 16 16" …><path d="M3 8h10m-4-4 4 4-4 4"/></svg>
</LinkButton>

Stacked CTA row

Pairing primary + secondary is the most common call-to-action layout. Stack them vertically when both deserve roughly equal weight — e.g. a hero section on a narrow card:

Install Publier Read the guides

<div style="display:flex;flex-direction:column;gap:0.75rem;align-items:flex-start;">
  <LinkButton href="/docs/get-started/installation">Install Publier</LinkButton>
  <LinkButton href="/docs/guides" variant="secondary">Read the guides</LinkButton>
</div>

Props

Prop	Type	Default	Description
`href`	`string`	—	Destination URL. Required.
`variant`	`'primary' \| 'secondary' \| 'minimal'`	`'primary'`	Visual style.
`iconPlacement`	`'start' \| 'end'`	`'end'`	Flex order for inline icon vs label text.
`rel`	`string`	—	`rel` attribute (e.g. `"noopener noreferrer"` for external links).
`target`	`'_blank' \| '_self' \| '_parent' \| '_top'`	—	Link target.
`class`	`string`	—	Extra CSS class.

Label text is passed as children.

Behaviour

Renders as a semantic <a> — screen readers announce it as a link, not a button.
primary uses your theme’s --color-primary token; secondary uses a border on the same token; minimal drops the surface entirely.
Zero JavaScript — pure CSS.

Whole-card clickable area → LinkCard.
Inline button-shaped anchors for changelog rows → UpdateBadge.