Boutons et actions

Contrôle segmenté

nouveauClasses hb-segmentedVuetify 2 v-btn-toggle mandatory denseVuetify 3 v-btn-toggle mandatory density="compact"

Quand l'utiliser

Quand les options sont peu nombreuses, courtes et que l'une est toujours active : période d'un graphique, mode d'affichage, unité. Au-delà de cinq ou avec des libellés longs, une liste déroulante ; pour des filtres cumulables, des puces à bascule.

Code

<div class="hb-row">
  <div class="hb-segmented" role="group" aria-label="Période"><button aria-pressed="true">Jour</button><button aria-pressed="false">Semaine</button><button aria-pressed="false">Mois</button></div>
  <div class="hb-segmented" role="group" aria-label="Vue"><button aria-pressed="true" aria-label="Liste"><i class="material-icons">view_list</i></button><button aria-pressed="false" aria-label="Grille"><i class="material-icons">grid_view</i></button></div>
  <div class="hb-segmented" role="group" aria-label="Unité"><button aria-pressed="false">kg</button><button aria-pressed="true">pièce</button><button aria-pressed="false">colis</button></div>
</div>

États et accessibilité

Le segment actif porte aria-pressed="true" et le style suit (fond blanc, couleur métier, légère ombre). Le groupe porte role="group" et un aria-label. Au clavier, Tab passe de segment en segment ; les flèches ne sont pas nécessaires. Un segment à icône seule a un aria-label.