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

Edit preferences

Sizing

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


Full width buttons

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

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

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

Extra Small

<button class='btn btn-default btn-xs'>Button</button>
<button class='btn btn-primary btn-xs'>Button</button>
<button class='btn btn-default btn-xs'>
  <i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-primary btn-xs'>
  <i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-default btn-xs'>
  <i class='material-icons md-18'>add</i>
</button>
<button class='btn btn-primary btn-xs'>
  <i class='material-icons md-18'>create</i>
</button>
launchButtons design specifications
content_copy
/* Extra small button */
.btn-xs {
  padding: $btn-xs-padding;
}

Small

<button class='btn btn-default btn-sm'>Button</button>
<button class='btn btn-primary btn-sm'>Button</button>
<button class='btn btn-default btn-sm'>
  <i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-primary btn-sm'>
  <i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-default btn-sm'>
  <i class='material-icons md-18'>add</i>
</button>
<button class='btn btn-primary btn-sm'>
  <i class='material-icons md-18'>create</i>
</button>
launchButtons design specifications
content_copy
/* Small button */
.btn-sm {
  padding: $btn-sm-padding;
}

Large

<button class='btn btn-default btn-lg'>Button</button>
<button class='btn btn-primary btn-lg'>Button</button>
<button class='btn btn-default btn-lg'>
  <i class='material-icons md-24'>autorenew</i>Button
</button>
<button class='btn btn-primary btn-lg'>
  <i class='material-icons md-24'>autorenew</i>Button
</button>
<button class='btn btn-default btn-lg'>
  <i class='material-icons md-24'>add</i>
</button>
<button class='btn btn-primary btn-lg'>
  <i class='material-icons md-24'>create</i>
</button>
launchButtons design specifications
content_copy
/* Large button */
.btn-lg {
  line-height: $btn-lg-line-height;
  padding: $btn-lg-padding;
}

Report an issue or share an idea