Button-group

Migrating the Button-group Component

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

1<div class="btn-group" role="group" aria-label="Basic example">
2  <button type="button" class="btn btn-secondary">Left</button>
3  <button type="button" class="btn btn-secondary">Middle</button>
4  <button type="button" class="btn btn-secondary">Right</button>
5</div>

PUIK

Basic Use

For any button group component that you use, replace the structure above with the following structure:

 1<div class="puik-button-group" role="group" aria-label="Position selection">
 2  <button class="puik-button puik-button--primary puik-button--md" aria-label="Select left">
 3    Left
 4  </button>
 5  <button class="puik-button puik-button--tertiary puik-button--md" aria-label="Select middle">
 6    middle
 7  </button>
 8  <button class="puik-button puik-button--tertiary puik-button--md" aria-label="Select right">
 9    right
10  </button>
11</div>
info

For accessibility reason, you may have to add an aria-label to each element to better describe its purpose.

Change the class of a button from puik-button--tertiary to puik-button--primary to make a button visually selected.

← Button
Card →