Link Buttons
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
To display visually distinct call-to-action links, use the <LinkButton>
component.
Import
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
).
import { LinkButton } from '@astrojs/starlight/components';
<LinkButton href="https://docs.astro.build" variant="secondary" icon="external" iconPlacement="start"> Related: Astro</LinkButton>
{% linkbutton href="https://docs.astro.build" variant="secondary" icon="external" iconPlacement="start" %}Related: Astro{% /linkbutton %}
<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.