Link Buttons

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

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.

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).

<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.