prestashop/themes/hummingbird/stories/ui/dropdowns/variations.html

<div class="btn-group">
  <button
    class="btn btn-primary btn-sm dropdown-toggle"
    type="button"
    id="dropdownMenuButton7"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    <i class="material-icons">ac_unit</i> Small Drop
  </button>
  <div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton7">
    <a class="dropdown-item" href="#">
      <i class="material-icons">ac_unit</i> Iceberg Action
    </a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-primary dropdown-toggle"
    type="button"
    id="dropdownMenuButton8"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    <i class="material-icons">ac_unit</i> Normal Drop
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton8">
    <a class="dropdown-item" href="#">
      <i class="material-icons">ac_unit</i> Iceberg Action
    </a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-primary btn-lg dropdown-toggle"
    type="button"
    id="dropdownMenuButton9"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    <i class="material-icons">ac_unit</i> Large Drop
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton9">
    <a class="dropdown-item" href="#">
      <i class="material-icons">ac_unit</i> Iceberg Action
    </a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-secondary btn-lg dropdown-toggle"
    type="button"
    id="dropdownMenuButton10"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Large Drop
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton10">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton11"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Normal Drop
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton11">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-secondary btn-sm dropdown-toggle"
    type="button"
    id="dropdownMenuButton12"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Small Drop
  </button>
  <div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton12">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<br /><br />

<div class="btn-group">
  <button
    class="btn btn-outline-primary btn-sm dropdown-toggle"
    type="button"
    id="dropdownMenuButton13"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Small Drop
  </button>
  <div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton13">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-outline-primary dropdown-toggle"
    type="button"
    id="dropdownMenuButton14"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Normal Drop
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton14">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-outline-primary btn-lg dropdown-toggle"
    type="button"
    id="dropdownMenuButton15"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Large Drop
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton15">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-outline-secondary btn-lg dropdown-toggle"
    type="button"
    id="dropdownMenuButton16"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Large Drop
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton16">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-outline-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton17"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Normal Drop
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton17">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-outline-secondary btn-sm dropdown-toggle"
    type="button"
    id="dropdownMenuButton18"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Small Drop
  </button>
  <div class="dropdown-menu menu-sm" aria-labelledby="dropdownMenuButton18">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<br /><br />

<div class="btn-group">
  <button
    class="btn btn-success dropdown-toggle"
    type="button"
    id="dropdownMenuButton19"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Success
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton19">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-outline-success dropdown-toggle"
    type="button"
    id="dropdownMenuButton20"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Success
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton20">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-danger dropdown-toggle"
    type="button"
    id="dropdownMenuButton21"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Danger
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton21">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-outline-danger dropdown-toggle"
    type="button"
    id="dropdownMenuButton22"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Danger
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton22">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-warning dropdown-toggle"
    type="button"
    id="dropdownMenuButton23"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Warning
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton23">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button
    class="btn btn-outline-warning dropdown-toggle"
    type="button"
    id="dropdownMenuButton24"
    data-bs-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Warning
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton24">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>