Tag

Le tag est une composition permettant de grouper une information. Par exemple:

Le nom d’une joueureuse
Un effet appliqué au jeu
Un évènement de jeu

Tailles

Le tag par défaut est petit, et complimente le petit bouton.

Deux carte

1<Button variant="action">
2  Piger
3</Button>
4<Tag variant="effect" borderStartRadius={20} size="md">
5  <TagLabel paddingStart={1}>
6    Demandé
7  </TagLabel>
8</Tag>

À l’inverse, le grand tag permet de complimenter le bouton par défaut. Pour composer un grand tag, spécifier l’attribut-valeur size="md".

Demandé

1<Button variant="action">
2  Piger
3</Button>
4<Tag variant="effect" borderStartRadius={20} size="md">
5  <Pastille bg="red.400">
6    <Sorte size={3.5} sorte="CE" color="red.600" />
7  </Pastille>
8  <TagLabel paddingStart={1}>
9    Demandé
10  </TagLabel>
11</Tag>

Arrondi

Si une pastille est utilisée dans un tag, le tag doit être arrondi pour mieux suivre la forme de la pastille. L’arrondi n’est disponible que pour le grand tag De plus, la composante <TagLabel> doit entourer le texte du tag. Ensuite, il suffit de spécifier deux attributs:

Pour <Tag>, spécifier soit borderStartRadius={20} ou borderEndRadius={20} selon l’emplacement de la pastille.
Pour <TagLabel> spécifier soit paddingStart={1} ou paddingEnd={1} selon l’emplacement de la pastille. Le texte doit être plus proche de la pastille.

Demandé

Pige

1<Tag variant="effect" borderStartRadius={20} size="md">
2  <Pastille bg="red.400">
3    <Sorte size={3.5} sorte="CE" color="red.600" />
4  </Pastille>
5  <TagLabel paddingStart={1}>
6    Demandé
7  </TagLabel>
8</Tag>
9<Tag variant="effect" borderEndRadius={20} size="md">
10  <TagLabel paddingEnd={1}>
11    Pige
12  </TagLabel>
13  <Pastille bg="white">
14    +5
15  </Pastille>
16</Tag>

Action

Lorsque le tag est combiné avec les boutons de variant pastille, il doit être identifié comme une action. Il faut donc spécifier le variant action. Le tag deviendra bleu, comme un bouton. Cependant, les pastilles serviront de bouton, alors que le libellé du tag restera non-intéractif.

Changer en

1<Tag variant="action" borderRadius={4} borderEndRadius={20} size="md">
2  <TagLabel paddingStart={3} paddingEnd={1}>
3    Changer en
4  </TagLabel>
5  <Button variant="pastille" bg="gray.200">
6    <Sorte size={3.5} sorte="PI" />
7  </Button>
8  <Button variant="pastille" bg="red.400">
9    <Sorte size={3.5} sorte="CE" color="red.600" />
10  </Button>
11  <Button variant="pastille" bg="red.400">
12    <Sorte size={3.5} sorte="CA" color="red.600" />
13  </Button>
14  <Button variant="pastille" bg="gray.200">
15    <Sorte size={3.5} sorte="TR" />
16  </Button>
17</Tag>