Surfaces

Bouton flottant

nouveauClasses hb-fab hb-fab--icon hb-fab--staticVuetify 2 v-btn fab fixed bottom right color="primary"Vuetify 3 v-btn icon position="fixed"

Quand l'utiliser

Sur tablette ou téléphone, quand l'écran est une liste et que l'action principale est « créer » ou « scanner » : nouvelle tâche, nouveau relevé, scanner un code. Quand l'écran a un formulaire, la barre de validation convient mieux.

Code

<div class="hb-row">
  <button class="hb-fab hb-fab--static"><i class="material-icons">add</i>Nouvelle tâche</button>
  <button class="hb-fab hb-fab--static hb-fab--icon" aria-label="Scanner"><i class="material-icons">qr_code_scanner</i></button>
</div>

Règles

Un seul bouton flottant par écran, toujours la même action sur un écran donné. Le libellé est préféré (version étendue) ; la version ronde a un aria-label.
Fixé à 24 px du bord (16 px sur téléphone, plus la zone de sécurité) ; il ne recouvre pas une barre de validation ni une barre basse : avec elles, il monte au-dessus.
hb-fab--static sert aux exemples et aux barres d'outils ; en production le bouton est fixé.