3.3.3 atoms.button.sizes Button sizes

Toggle example guides Toggle HTML markup

Define a different button size with .btn-lg, .btn-sm, or .btn-xs.

By default use the default size. You can choose to use a large button if the action really needs to catch the user`s attention. Combine this with a primary or accent style as well to get maximum exposure. Do not mix different button sizes in a set of buttons. If the information density in a block or section is high and you need to make up space you can choose a smaller button size. An example of this are buttons that appear in repetetive blocks.

Extra ssmall size
Small size
Large size
Block level size
Markup: 02-atoms/button/button.twig
<button class="btn {{modifier_class}}">Button</button>
Source: 02-atoms/button/button.scss, line 44