Link buttons

Render styled anchor buttons in docs pages using the LinkButton component.

<LinkButton> renders an anchor tag styled as a button. Use it for calls to action within doc pages — linking to related guides, external resources, or download targets.

Props:

• href (required string) — the link destination
• variant — 'primary' (default) or 'secondary'
• external — optional boolean; adds target="_blank" and an ↗ indicator

Primary button

<LinkButton href="/en/getting-started/installation">Get started</LinkButton>

Secondary button

<LinkButton href="/en/authoring/markdown-and-mdx" variant="secondary">Read the authoring guide</LinkButton>

External link

Set external to open in a new tab and show the ↗ indicator:

<LinkButton href="https://astro.build" external>Astro documentation</LinkButton>

Side-by-side buttons

Wrap multiple <LinkButton> elements in a <div> with inline flex to place them side by side:

<div style="display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0;">
  <LinkButton href="/en/getting-started/installation">Get started</LinkButton>
  <LinkButton href="https://github.com" variant="secondary" external>View on GitHub</LinkButton>
</div>