Button

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

1<button class="btn btn-primary">Primary</button>

PUIK

Basic Use

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

1<button class="puik-button puik-button--primary puik-button--md">
2  Click here
3</button>

Variants

The following button variants are available:

  • primary
  • destructive
  • secondary
  • tertiary
  • text
  • info
  • success
  • warning

To use any of these variants, add the puik-button--${variant} class to the button:

1<button class="puik-button puik-button--${variant} puik-button--md">
2  Click here
3</button>
1<button class="puik-button puik-button--primary puik-button--md">Primary</button>
2<button class="puik-button puik-button--secondary puik-button--md">Secondary</button>
3<button class="puik-button puik-button--tertiary puik-button--md">Tertiary</button>
4<button class="puik-button puik-button--text puik-button--md">Text</button>
5<button class="puik-button puik-button--info puik-button--md">Info</button>
6<button class="puik-button puik-button--success puik-button--md">Success</button>
7<button class="puik-button puik-button--warning puik-button--md">Warning</button>
8<button class="puik-button puik-button--danger puik-button--md">Danger</button>
9<button class="puik-button puik-button--destructive puik-button--md">Destructive</button>

Sizes

Different sizes are available for each button:

  • sm (small)
  • md (medium)
  • lg (large)

To use any of these sizes, add the puik-button--${size} class to the button:

1<button class="puik-button puik-button--primary puik-button--${size}">
2  Button
3</button>
1<button class="puik-button puik-button--primary puik-button--sm">
2  Small
3</button>
4<button class="puik-button puik-button--primary puik-button--md">
5  Medium
6</button>
7<button class="puik-button puik-button--primary puik-button--lg">
8  Large
9</button>

Width

By default, the button width will adapt to its contents. For the button to be as wide as possible, use the puik-button--fluid class:

1<button class="puik-button puik-button--primary puik-button--md puik-button--fluid">
2  Fluid
3</button>

Disabled

A button can be set as disabled by adding the disabled attribute:

1<button
2  class="puik-button puik-button--primary puik-button--md"
3  disabled
4>
5  Disabled
6</button>

Icons

You can add icons inside buttons, either on the left or on the right of the text.

The list of available icons can be found here.

Icon on the left 

1<button class="puik-button puik-button--primary puik-button--md">
2  <div
3    class="puik-icon material-icons-round puik-button__left-icon"
4    style="font-size: 1.25rem;"
5  >
6    check
7  </div>
8  Click here
9</button>

Icon on the right 

1<button class="puik-button puik-button--primary puik-button--md">
2  Click here
3  <div
4    class="puik-icon material-icons-round puik-button__right-icon"
5    style="font-size: 1.25rem;"
6  >
7    check
8  </div>
9</button>

A button visual can also be added over a link. To do so, replace the button tag with an a tag:

1<a class="puik-button puik-button--primary puik-button--md" href="/"> Link </a>
Link

Note: All the options seen above (variant, size, width, disabled) can also be applied in this case.

← Breadcrumb
Button-group →