Bouton

Le bouton permet de valider une action de jeu. Il y a deux tailles, deux type et trois thèmes pour les boutons. Les boutons proviennent de la bibliothèque Chakra UI.

Tailles

Il y a un petit et un grand bouton. Par défaut, un bouton est grand. Pour composer un petit bouton, spécifier l’attribut-valeur size="sm".

1<Button size="sm" variant="action">
2  Un petit bouton
3</Button>

Variants

Les trois variants possibles sont action, go et danger. Les variants apportent une signification au bouton. La plupart du temps, le variant action par défaut suffit.

Pour signifier le commencement d’un jeu, spécifier l’attribut-valeur variant="go".

Pour signifier une interruption, comme la déconnexion à une table de jeu, spécifier l’attribut valeur variant="danger".

1<Button variant="action">Action</Button>
2<Button variant="go">Jouer</Button>
3<Button variant="danger">Danger</Button>

Variants spéciaux

Il existe 3 variants spciaux, eux aussi disponibles dans l’attribut variant.

Le variant pastille génère un bouton ayant les mêmes dimensions que la composante Pastille.

Le variant card s’emploie uniquement pour autour d’une Carte face cachée.

Le variant cardValue, similairement, s’emploie uniquement autour d’une Carte face visible.

1<Button variant="pastille">
2    <Sorte sorte="PI" />
3</Button>
4<Button variant="pastille" bg="red.400">
5    <Sorte size={3.5} sorte="CE" color="red.600" />
6</Button>
7<Button variant="pastille" bg="red.400">
8    <Sorte size={3.5} sorte="CA" color="red.600" />
9</Button>
10<Button variant="pastille" bg="gray.200">
11    <Sorte size={3.5} sorte="TR" />
12</Button>