Skip to content
Starlight Nova

Link Button

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

Preview

Section titled “Preview”

Usage

Section titled “Usage”
import { LinkButton } from 'starlight-theme-nova/components'

<div>
  <LinkButton href="/guide/getting-started/">Primary</LinkButton>
  <LinkButton href="/guide/markdown/" variant="secondary">
    Secondary
  </LinkButton>
  <LinkButton
    href="https://docs.astro.build"
    variant="minimal"
    icon="external"
    iconPlacement="start"
  >
    Minimal with external icon
  </LinkButton>
</div>
<div>
  <LinkButton href="/guide/markdown/" variant="secondary" icon="right-arrow">
    Right Arrow
  </LinkButton>
  <LinkButton
    href="/guide/markdown/"
    variant="secondary"
    icon="left-arrow"
    iconPlacement="start"
  >
    Left Arrow
  </LinkButton>
</div>

<LinkButton> Props

Section titled “<LinkButton> Props”

The <LinkButton> component accepts the same props as Starlight’s <LinkButton> component.