Button · Guilloche

ATELIER INTERACTIF

Essayez Button

Modifiez les propriétés. L’aperçu et le code sont rendus par Symfony et utilisent les mêmes props Twig.

6 composants configurables

Propriétés

Variante Taille Libellé Chargement

Sans JavaScript, ce formulaire fonctionne aussi par rechargement de la page.

APERÇU SERVEUR / TWIG RÉEL

Code Twig utilisable

<twig:ui:Button variant="primary" size="md">Enregistrer</twig:ui:Button>

Exemples

Variantes

<twig:ui:Button>Enregistrer</twig:ui:Button>
<twig:ui:Button variant="danger">Supprimer</twig:ui:Button>

Tailles

<twig:ui:Button size="sm">Petit</twig:ui:Button>
<twig:ui:Button size="lg">Grand</twig:ui:Button>

États

Lien de navigation

<twig:ui:Button loading>Enregistrement…</twig:ui:Button>
<twig:ui:Button disabled>Désactivé</twig:ui:Button>
<twig:ui:Button href="{{ path('app_billing') }}">Ouvrir</twig:ui:Button>

Props

Prop	Défaut	Rôle
`variant`	null` (résolu en `primary` par défaut)	`primary`, `secondary`, `outline`, `ghost`, `link`, `danger`, `danger-soft`
`intent`	`primary`	Compatibilité : intention historique utilisée lorsque `variant` est absent
`appearance`	`solid`	Compatibilité : apparence historique utilisée lorsque `variant` est absent
`size`	`md`	`sm` (34 px), `md` (40 px), `lg` (44 px)
`href`	`null`	Quand présent, rend un lien ; sinon un bouton
`type`	`button`	Type du bouton quand il n'y a pas de `href`
`disabled`	`false`	Désactive le bouton, jamais appliqué à un lien
`loading`	`false`	Affiche un chargeur et occupe le bouton

Accessibilité

Le composant forwarde tous les attributs HTML : aria-label, aria-labelledby, etc.
Un lien n'accepte jamais d'état disabled.
L'état de chargement est communiqué par aria-busy="true" et un spinner masqué aux technologies d'assistance.

README complet et exemples de la recette