Pastille
La pastille compose un cercle parfait, avec au centre du texte, un avatar, un glyphe.
Pour générer un bouton, plutôt utiliser le variant pastille de la composante <Button>.
L’attribut size permet aussi de composer différentes tailles de pastilles. Par défaut, la taille est 9.
+2
1<Pastille bg="red.400">
2 <Sorte sorte={"CA"} boxSize={3.5} color="red.600" />
3</Pastille>
4<Pastille bg="gray.200">
5 <Sorte sorte={"TR"} boxSize={3.5} />
6</Pastille>
7<Pastille bg="yellow.200">
8 <Text fontSize="base">+2</Text>
9</Pastille>
10<Pastille bg="orange.300">
11 <Avatar name="Sylvain" />
12</Pastille>
13<Pastille bg="orange.300">
14 <svg
15 width="22"
16 height="22"
17 viewBox="0 0 22 22"
18 fill="none"
19 xmlns="http://www.w3.org/2000/svg"
20 >
21 <path
22 d="M21 11L11 21M21 11L11 1M21 11H1"
23 stroke="#401600"
24 strokeWidth="2"
25 strokeLinecap="round"
26 strokeLinejoin="round"
27 />
28 </svg>
29</Pastille>