The openSUSE 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
menu
more_horiz
  • More

Icon buttons

There are a lot of benefits of using icon buttons. Icons accompanied by labels make information easier to find and scan. Only icon buttons can be compact enough to allow toolbars, tables, and so on to display many icon buttons in a relatively small space.

Buttons with icon

Using icons in buttons can help to enhance the UX. Add an icon inside any style button with a label. Place the icons before label in order for users to see them first.

Add EOS-icons or material design icon inside any style of button to create a button with an icon.

<button class='btn btn-default'>
  <i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-primary'>
  <i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-primary'>
  <i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-danger'>
  <i class='material-icons md-18'>autorenew</i>Button
</button>

Only icon buttons

If an icon button has no label be sure to use a tooltip to offer some short explanation of the buttons purpose.

You can create an icon-only button, by adding an EOS or Material design icon inside any style of button without a text label.

<button class='btn btn-default'>
  <i class='material-icons md-18'>add</i>
</button>
<button class='btn btn-primary'>
  <i class='material-icons md-18'>create</i>
</button>
<button class='btn btn-outline-primary'>
  <i class='material-icons md-18'>autorenew</i>
</button>
<button class='btn btn-danger'>
  <i class='material-icons md-18'>delete</i>
</button>