Link Button

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

Preview

Get started

Markdown

Related: Astro

Usage

import { LinkButton } from 'starlight-theme-nova/components'

<LinkButton href="/guide/getting-started/">Get started</LinkButton>
<LinkButton href="/guide/markdown/" variant="secondary">
  Markdown
</LinkButton>
<LinkButton
  href="https://docs.astro.build"
  variant="minimal"
  icon="external"
  iconPlacement="start"
>
  Related: Astro
</LinkButton>

<LinkButton> Props

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.