Link Buttons

To display visually distinct call-to-action links, use the <LinkButton> component.

Preview

Read the docs

Import

import { LinkButton } from '@astrojs/starlight/components';

Usage

Use the <LinkButton> component to display a visually distinct call-to-action link. A link button is useful for directing users to the most relevant or actionable content and is often used on landing pages.

A <LinkButton> requires an href attribute. Optionally, customize the appearance of the link button using the variant attribute, which can be set to primary (the default), secondary, or minimal.

MDX

import { LinkButton } from '@astrojs/starlight/components';

<LinkButton href="/getting-started/">Get started</LinkButton>
<LinkButton href="/reference/configuration/" variant="secondary">
  Configuration Reference
</LinkButton>

Markdoc

{% linkbutton href="/getting-started/" %}Get started{% /linkbutton %}

{% linkbutton href="/reference/configuration/" variant="secondary" %}
Configuration Reference
{% /linkbutton %}

Preview

Get started

Configuration Reference

Add icons to link buttons

Include an icon in a link button using the icon attribute set to the name of one of Starlight’s built-in icons.

The iconPlacement attribute can be used to place the icon before the text by setting it to start (defaults to end).

MDX

import { LinkButton } from '@astrojs/starlight/components';

<LinkButton
  href="https://docs.astro.build"
  variant="secondary"
  icon="external"
  iconPlacement="start"
>
  Related: Astro
</LinkButton>

Markdoc

{% linkbutton
   href="https://docs.astro.build"
   variant="secondary"
   icon="external"
   iconPlacement="start" %}
Related: Astro
{% /linkbutton %}

Preview

Related: Astro

<LinkButton> Props

Implementation: LinkButton.astro

The <LinkButton> component accepts the following props and also any other <a> attributes:

href

required
type: string

The URL that the link button points to.

variant

type: 'primary' | 'secondary' | 'minimal'
default: 'primary'

The appearance of the link button. Set to primary for a prominent call-to-action link using the theme’s accent color, secondary for a less prominent link, or minimal for a link with minimal styling.

icon

type: string

A link button can include an icon attribute set to the name of one of Starlight’s built-in icons.

iconPlacement

type: 'start' | 'end'
default: 'end'

Determines the placement of the icon in relation to the link button text.