The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
EOS Design System logotype

Sizing

The size of buttons plays a key role in helping users to identify buttons according to their importance.


Do not use the btn-xs and btn-xs button classes. They have been excluded from the EOS Design System because they do not fullfill our criteria for readability and accessibility.

Full width buttons

Full width buttons can span the full width of a parent container.

Add a btn-block class to create a full width button.

content_copy
<button class='btn btn-secondary btn-block'>Button</button>
<button class='btn btn-primary btn-block'>Button</button>

Small

Use when there isn't enough vertical space for a regular size button.

Never use a small button next to a regular sized button.

Never use the "block" button next to a normal button.

content_copy
<button class='btn btn-secondary btn-sm'>Button</button>
<button class='btn btn-primary btn-sm'>Button</button>
<button class='btn btn-secondary btn-sm'>
  <i class='eos-icons eos-18'>autorenew</i> Button
</button>
<button class='btn btn-primary btn-sm'>
  <i class='eos-icons eos-18'>autorenew</i> Button
</button>
<button class='btn btn-secondary btn-sm' data-toggle='tooltip' title='Add'>
  <i class='eos-icons eos-18'>add</i>
</button>
<button class='btn btn-primary btn-sm' data-toggle='tooltip' title='Edit'>
  <i class='eos-icons eos-18'>create</i>
</button>