Composant · Action

Link

Stable

Lien stylé cohérent avec le DS pour naviguer vers une autre URL. Trois variantes (inline, standalone, muted), prise en charge des liens externes et d'un état désactivé.

Quand l'utiliser

Pour naviguer vers une autre page ou ressource (interne ou externe).
Pour déclencher une action sur la page courante, utilisez plutôt Button.
inline dans un paragraphe ; standalone pour un lien isolé en gras.

Variantes

inline

Lisez la documentation des tokens pour comprendre le contrat marque blanche.

standalone

Voir tous les composants

muted

Mentions légales

Voir le code (Svelte)

<div class="docs-demo-stack">
  <h3>inline</h3>
  <p>
    Lisez la 
    <Link href="#link-demo">documentation des tokens</Link>
     pour comprendre le contrat marque blanche.
  </p>
  <h3>standalone</h3>
  <Link href="#link-demo" variant="standalone">Voir tous les composants</Link>
  <h3>muted</h3>
  <Link href="#link-demo" variant="muted">Mentions légales</Link>
</div>

États

Voir le code (Svelte)

<div class="docs-demo-stack">
  <h3>Externe</h3>
  <Link
    href="https://github.com/rhanka/sent-tech-design-system"
    external
    variant="standalone"
  >Dépôt GitHub</Link>
  <h3>Désactivé</h3>
  <Link href="#link-demo" disabled>Lien désactivé</Link>
  <h3>onclick</h3>
  <Link href="#link-demo">Lien avec onclick</Link>
</div>

external pose target="_blank" et rel="noreferrer".

disabled retire le href, pose aria-disabled et bloque le clic.

onclick est appelé au clic (et bloqué si disabled) ; câblez-y votre logique.

Anatomie

Élément racine : un <a> natif (classe st-link + variante).
inline : souligné, hérite de la taille de texte ; standalone : inline-flex en gras avec gap d'icône.
L'état disabled retire le href : l'élément n'est plus un lien actif.

Accessibilité

Élément <a> natif : navigable au clavier, activable avec Entrée.
Focus toujours visible (outline thémé + léger rayon).
disabled pose aria-disabled="true" et empêche la navigation.
Le libellé doit décrire la destination : évitez « cliquez ici ».

Lignes directrices

À faire

Libellés explicites décrivant la cible.
external pour les liens ouvrant un nouvel onglet.

À éviter

Styliser un Button en lien pour une action.
Des libellés vagues (« ici », « lire la suite ») isolés.

API

Prop	Type	Défaut	Description
`href`	`string`	requis	Destination du lien.
`variant`	`"inline" \| "standalone" \| "muted"`	`"inline"`	Style du lien.
`disabled`	`boolean`	`false`	Désactive le lien (retire href).
`external`	`boolean`	`false`	Ouvre dans un nouvel onglet (target/rel).
`target`	`string`	auto	Cible explicite (sinon dérivée de external).
`rel`	`string`	auto	rel explicite (sinon dérivé de external).
`onclick`	`(e: MouseEvent) => void`	optionnel	Bloqué si disabled.
`children`	`Snippet`	libellé	Contenu du lien.
`class`	`string`	optionnel	Classe(s) supplémentaire(s).
Autres attributs	`HTMLAnchorAttributes`	N/A	Propagés sur l'<a>.

Tokens utilisés

--st-component-link-text
--st-component-link-hoverText
--st-component-link-disabledText
--st-component-link-anatomy-typography-textDecoration
--st-component-link-anatomy-focus-outline
--st-semantic-text-link
--st-semantic-text-secondary