Boutons de liaison

Pour afficher des liens visuellement distincts qui appellent à l’action (également connus sous le nom de « call-to-action » ou « CTA » en anglais), utilisez le composant <LinkButton>.

Aperçu

Lire la documentation

Import

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

Utilisation

Utilisez le composant <LinkButton> pour afficher un lien visuellement distinct qui appelle à l’action. Un bouton de liaison est utile pour diriger les utilisateurs vers le contenu le plus pertinent ou actionnable et est souvent utilisé sur les pages d’accueil.

Le composant <LinkButton> nécessite un attribut href. Facultativement, personnalisez l’apparence du bouton de liaison en utilisant l’attribut variant, qui peut être défini sur primary (la valeur par défaut), secondary ou minimal.

MDX

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

<LinkButton href="/fr/getting-started/">Mise en route</LinkButton>
<LinkButton href="/fr/reference/configuration/" variant="secondary">
  Référence de configuration
</LinkButton>

Markdoc

{% linkbutton href="/fr/getting-started/" %}Mise en route{% /linkbutton %}

{% linkbutton href="/fr/reference/configuration/" variant="secondary" %}
Référence de configuration
{% /linkbutton %}

Aperçu

Mise en route

Référence de configuration

Ajouter des icônes aux boutons de liaison

Incluez une icône dans un bouton de liaison en utilisant l’attribut icon défini avec une des icônes disponibles avec Starlight.

L’attribut iconPlacement peut être utilisé pour positionner l’icône avant le texte en le définissant sur start (par défaut à end).

MDX

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

<LinkButton
  href="https://docs.astro.build/fr/"
  variant="secondary"
  icon="external"
  iconPlacement="start"
>
  Référence: Astro
</LinkButton>

Markdoc

{% linkbutton
   href="https://docs.astro.build/fr/"
   variant="secondary"
   icon="external"
   iconPlacement="start" %}
Référence: Astro
{% /linkbutton %}

Aperçu

Référence: Astro

Props de <LinkButton>

Implémentation : LinkButton.astro

Le composant <LinkButton> accepte les props suivantes et également tout autre attribut de l’élément <a> :

href

Obligatoire
Type : string

L’URL vers laquelle le bouton de liaison pointe.

variant

Type : 'primary' | 'secondary' | 'minimal'
Par défaut : 'primary'

L’apparence du bouton de liaison. Définissez primary pour un lien qui appelle à l’action proéminent utilisant la couleur d’accentuation du thème, secondary pour un lien moins proéminent, ou minimal pour un lien avec un style minimal.

icon

Type : string

Un bouton de liaison peut inclure un attribut icon défini avec une des icônes disponibles avec Starlight.

iconPlacement

Type : 'start' | 'end'
Par défaut : 'end'

Détermine la position de l’icône par rapport au texte du bouton de liaison.