Boutons et actions

Barre d'outils et menu ⋮

stableClasses hb-toolbar hb-toolbar-sep hb-menu hb-menu-item hb-menu-sepVuetify 2 v-menu + v-list dense pour le ⋮ (habillés par vuetify.scss)Vuetify 3 v-menu + v-list density="compact"

Composition

De gauche à droite : les actions fréquentes (imprimer, archiver), un séparateur, puis soit une action destructive seule en bouton à icône rouge au survol, soit un bouton ⋮ qui ouvre un menu avec le secondaire et le destructif en dernier, après un séparateur.

Code

<div class="hb-card-banner" style="max-width:640px">
  <div class="hb-head">
    <div><div class="hb-h1" style="font-size:22px;line-height:28px">Check-list du 06/11/2026</div><div class="hb-list-meta"><span>Créée le 06/11/2026</span><span>·</span><span>3 tâches</span></div></div>
    <div class="hb-head__actions hb-toolbar">
      <button class="hb-btn hb-btn-icon" aria-label="Imprimer"><i class="material-icons">print</i></button>
      <button class="hb-btn hb-btn-icon" aria-label="Archiver"><i class="material-icons">inventory_2</i></button>
      <span class="hb-toolbar-sep"></span>
      <button class="hb-btn hb-btn-icon hb-btn-icon-danger" aria-label="Supprimer"><i class="material-icons">delete</i></button>
    </div>
  </div>
</div>
<div class="hb-menu" style="width:220px">
  <div class="hb-menu-item"><i class="material-icons" style="font-size:18px">content_copy</i>Dupliquer</div>
  <div class="hb-menu-item"><i class="material-icons" style="font-size:18px">inventory_2</i>Archiver</div>
  <div class="hb-menu-sep"></div>
  <div class="hb-menu-item" style="color:var(--danger)"><i class="material-icons" style="font-size:18px">delete</i>Supprimer</div>
</div>

Règles

Sur un bandeau teinté (hb-card-banner), les boutons à icône sont transparents et prennent un fond blanc au survol.
Le menu ⋮ regroupe ce qui n'est pas fréquent ; s'il n'y a qu'une action secondaire, pas de menu : un bouton à icône après le séparateur.
Le menu lui-même est un v-menu dans une application Vuetify ; hb-menu donne le même rendu pour un popover maison ou le site.