Anatomie
Le composant bouton liste déroulante est composé de plusieurs éléments dont certains ne sont visibles qu'en fonction des options de personnalisation choisies.
- Bouton déclencheur
- Chevron
- Menu
- Option de menu (menu item)
- Icône sélectionné
- Préfix
- Suffix
- Label (titre de section)
- Séparateur (entre les sections)
Tailles
Les boutons liste déroulante sont disponibles dans 3 tailles. Par défaut, privilégiez la taille moyenne.
La taille est contrôlée au niveau des sous-composants bouton et menu-item.
États
Les états du bouton liste déroulante sont également contrôlés au niveau des sous-composants bouton et menu-item.
Ces deux composants existent en 4 états différents.
Bouton
Responsive
Le bouton liste déroulante hérite du même comportement qu'un bouton classique pour le responsive.
Il s'agrandit généralement pour s'adapter à la taille du texte.
Si le bouton possède une taille fixe, comme par exemple sur un petit écran, le texte sera tronqué pour garder le bouton sur une seule ligne.
La taille minium d'un bouton sur mobile est de 48 pixels en hauteur et 48 pixels en largeur. Cette taille permet une interaction tactile facile et précise, même pour les utilisateurs ayant des doigts plus grands ou des difficultés motrices.