Easy Solutions - Composants / Bouton

Variants

Chaque variant correspond à un niveau de hiérarchie. Un seul bouton default par zone d'action, les autres jouent un rôle secondaire.

default Action principale de la zone. Un seul par écran ou zone d'action.

secondary Action secondaire ou neutre. Toujours accompagné d'un primary.

destructive Action destructrice ou irréversible. Suppression, réinitialisation.

ghost Action tertiaire, discrète. Lien contextuel, option optionnelle.

<twig:Button variant="default">Valider</twig:Button> <twig:Button variant="secondary">Annuler</twig:Button> <twig:Button variant="destructive">Supprimer</twig:Button> <twig:Button variant="ghost">En savoir plus</twig:Button>

Styles

Le style outline allège visuellement le bouton tout en conservant son variant. À utiliser sur des fonds colorés ou pour une action secondaire qui doit rester visible.

outline Bordure neutre sans couleur sémantique. Fond coloré, toolbar.

outline-primary Bordure et texte primary. Se remplie au hover.

outline-secondary Bordure et texte secondary. Se remplie au hover.

outline-destructive Bordure et texte destructive. Se remplie au hover.

<twig:Button variant="outline">Action</twig:Button> <twig:Button variant="outline-primary">Valider</twig:Button> <twig:Button variant="outline-secondary">Annuler</twig:Button> <twig:Button variant="outline-destructive">Supprimer</twig:Button>

Lien

Le variant link ressemble à un lien texte mais déclenche une action. Utiliser as="a" + href pour la navigation entre pages.

Voir les composants

action Déclenche une action JS/Stimulus. Tag button par défaut.

navigation Lien de navigation. Utiliser as="a" + href.

<twig:Button variant="link">Action contextuelle</twig:Button> <twig:Button variant="link" as="a" href="/...">Navigation</twig:Button>

Tailles

Quatre tailles disponibles, plus un mode pleine largeur. La taille default est celle par défaut, ne pas la spécifier si elle convient.

sm Tableaux, toolbars, zones denses. h-7, texte 12.8px.

default Défaut. Formulaires, modales, actions courantes. h-8.

lg Pages de connexion, CTA hero. h-9.

<twig:Button size="xs">Xs</twig:Button> <twig:Button size="sm">Small</twig:Button> <twig:Button>Default</twig:Button> <twig:Button size="lg">Large</twig:Button>

Pleine largeur

Passer class="w-full" pour étirer le bouton sur toute la largeur de son conteneur. Réservé aux formulaires en colonne étroite (connexion, inscription).

<twig:Button class="w-full">Se connecter</twig:Button>

Avec icône

Les icônes renforcent la lisibilité de l'action. Elles peuvent être placées à gauche (défaut) ou à droite. On utilise toujours une icône cohérente avec l'action, jamais décorative.

<twig:Button><twig:ux:icon name="bi:plus-circle"/> Ajouter</twig:Button> <twig:Button>Télécharger <twig:ux:icon name="bi:download"/></twig:Button> <twig:Button variant="secondary"><twig:ux:icon name="bi:pencil"/> Modifier</twig:Button> <twig:Button variant="destructive"><twig:ux:icon name="bi:trash"/> Supprimer</twig:Button>

Les icônes utilisent le système UX Icons. Préfixe bi: pour Bootstrap Icons, material-symbols: pour Material. Voir la liste complète sur ux.symfony.com/icons.

États

L'état du bouton communique la disponibilité de l'action à l'utilisateur. Il ne doit jamais être simulé par du CSS inline, toujours passer par les props.

normal État par défaut, action disponible.

loading Requête en cours. Ajoute un spinner, bloque le clic, pose aria-busy="true".

disabled Action indisponible. Opacité 50 %, curseur interdit. Attribut HTML natif disabled.

<twig:Button>Normal</twig:Button> <twig:Button disabled aria-busy="true"><twig:Spinner /> Chargement</twig:Button> <twig:Button disabled>Désactivé</twig:Button>

API du composant

Toutes les props disponibles pour <twig:Button>.

Prop	Type	Défaut	Valeurs acceptées	Description
`variant`	string	`'default'`	`default` `secondary` `destructive` `outline` `outline-primary` `outline-secondary` `outline-destructive` `ghost` `link`	Hiérarchie et couleur de l'action.
`size`	string	`'default'`	`xs` `sm` `default` `lg` `icon` `icon-xs` `icon-sm` `icon-lg`	Taille du bouton.
`as`	string	`'button'`	Tout tag HTML valide (`button`, `a`, `div`…)	Tag HTML rendu. Utiliser `as="a"` pour un lien stylé en bouton.
`contenu`	block		Texte, icône `{{ ux_icon(...) }}`, ou les deux	Contenu passé entre les balises ouvrante et fermante du composant.
`disabled`	attr HTML		attribut booléen	Désactive le bouton (opacité 50 %, pointeur interdit). Passé via `{{ attributes }}`.
`type`	attr HTML	`'button'`	`button` `submit` `reset`	Attribut HTML `type`. Passé via `{{ attributes }}`.

Do & Don't

Un seul bouton default par zone d'action
Utiliser destructive pour toute action irréversible
Passer disabled aria-busy="true" + <twig:Spinner /> lors d'un appel asynchrone
Utiliser type="submit" dans les formulaires
Choisir une icône cohérente avec l'action déclenchée

Mettre plusieurs default côte à côte
Simuler le disabled avec opacity: 0.5 en CSS inline
Utiliser un <a> stylé en bouton pour déclencher une action
Ajouter des classes Bootstrap btn-* en dehors du composant
Utiliser destructive pour attirer l'attention sans intention destructrice

Règles

Règle

Toujours utiliser <twig:Button>. Ne jamais écrire un <button> manuellement avec des classes ds-btn-*.

Règle

Un contenu textuel est obligatoire. Même si une icône suffit visuellement, le texte reste nécessaire pour l'accessibilité (ou utiliser aria-label).

Règle

En état de chargement, toujours passer disabled aria-busy="true" pour éviter les doubles soumissions.

Règle

Le variant destructive impose une confirmation avant exécution (modale ou message d'avertissement).