Design system

Outil de génération

Configure ton composant

Choisis les options à gauche. Tu vois le résultat à droite, puis tu copies uniquement le code dont tu as besoin pour ton site.

Composant

Button

Interactif
Variante
Taille
Icône
Libellé
À retenirUne icône seule doit toujours avoir un aria-label.
AperçuPrimary · md
Code à copierAstro
<Button size="md" icon="mail-edit">
  Voir le projet
</Button>

Le principe

Du choix au code en trois étapes

01

Configure

Choisis une variante, une taille, une icône et un libellé.

02

Vérifie

L’aperçu te montre exactement la combinaison sélectionnée.

03

Copie

Colle le snippet dans une page Astro de ton site.

Dans ton site

Avant de coller le snippet

---
import Button from 'ux-design-system/components/Button.astro';
---