Zum Inhalt springen
Starlight

Link-Buttons

Um visuell eindeutige Call-to-Action-Links anzuzeigen, verwenden Sie die Komponente <LinkButton>.

Vorschau

Lies die Dokumentationen

Import

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

Verwendung

Verwende die Komponente <LinkButton>, um einen visuell eindeutigen Call-to-Action-Link anzuzeigen. Ein Link-Button ist nützlich, um Nutzer zu den relevantesten oder handlungsrelevanten Inhalten zu leiten und wird häufig auf Landing Pages verwendet.

Ein <LinkButton> benötigt ein href Attribut. Optional kann das Aussehen des Link-Buttons mit dem Attribut variant angepasst werden, das auf primary (Standard), secondary oder minimal gesetzt werden kann.

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


<LinkButton href="/de/getting-started/">Los geht's</LinkButton>
<LinkButton href="/de/reference/configuration/" variant="secondary">
  Konfiguration Referenz
</LinkButton>
Vorschau
Los geht’s

Konfiguration Referenz

Füge ein Symbol in einen Link-Button ein, indem du das Attribut icon auf den Namen eines von Starlights eingebauten Symbolen setzt.

Das Attribut iconPlacement kann verwendet werden, um das Symbol vor dem Text zu platzieren, indem man es auf start setzt (Standardwert ist end).

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


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

Verwandt: Astro

<LinkButton>-Eigenschaften

Implementation: LinkButton.astro

Die <LinkButton>-Komponente akzeptiert die folgenden Eigenschaften und auch alle anderen <a>-Attribute:

href

Erforderlich
Typ: string

Die URL, auf die der Link-Button zeigt.

variant

Typ: 'primary' | 'secondary' | 'minimal'
Standard: 'primary'

Das Aussehen des Link-Button. Setze auf primary für einen auffälligen Call-to-Action-Link mit der Akzentfarbe des Themas, auf secondary für einen weniger auffälligen Link oder auf minimal für einen Link mit minimalem Styling.

icon

Typ: string

Ein Link-Button kann ein icon-Attribut enthalten, das auf den Namen eines von Starlights eingebauten Symbolen gesetzt ist.

iconPlacement

Typ: 'start' | 'end'
Standard: 'end'

Bestimmt die Platzierung des Symbols im Verhältnis zum Text des Link-Buttons.