Buttons

Buttons communicate actions that users can take. They allow users to make choices with one single tap.

Each button should have a proper label or/and icon. The meaning should be clear and always tie back to what it will do for the user because users feel more comfortable when they understand what action a button does. Tell users what the outcome will be after pressing the button. Such explicit labeling serves as just-in-time help, giving users confidence in selecting the action.

I Am a Flashy Button Just Waiting To Be Clicked
  1. Button Types
  2. Elements
  3. Disabling Buttons
  4. Buttons with Icons
  5. Buttons with Standalone Icons
  6. Text Button/Link Text
  7. Button Widths
  8. Optional Button Margin

Button Types

Primary Button

Primary Buttons have a high emphasis on a page. Use primary buttons to drag a user’s attention; it should contain the main user action. A secondary next to a primary is a good partner to offer users a choice. Primary button is the type of button you will get when applying button-primary.

Primary button

				

Secondary Button

Secondary buttons are kind of standard buttons on IS24.

Secondary button

				

Ghost Button

Ghost buttons are tertiary buttons on IS24.

Ghost button

				

Elements

Buttons can be made from

  • Button elements (<button>),
  • Links (<a>), and
  • form submit buttons (<input type="submit" />).
Same button, different elements

				

				

Disabling Buttons

You can make buttons semantically disabled through the disabled attribute, making them unclickable and showing their disabled state. You can also just make them look disabled to show the user that they are temporarily disabled by appending the disabled class.

Disabled buttons should be avoided and only used in special cases. It is unideal to show users a button which they cannot activate and probably don’t know how to. Please consider using a default button instead and show via validation what users need to do to proceed.

Disabled buttons
<button class="button disabled">Disabled Button</button><br />

Disabled form button
<input type="submit" class="button-primary"
       value="Disabled Submit Button" disabled />

Buttons with Icons

Buttons can be decorated with icons. This allows you to build buttons with a wide range of contextual icons on demand without the need to have a specific button designed and implemented.

Use buttons with icons whenever the button needs more visibility. Select icons with care. The icon needs to fit the button’s label and purpose.

Buttons with icons

Please note that icons are only available on buttons that are based on <a> or <button> elements.
<input> buttons (as in form submits) cannot have icons due to technological limitations of the <input> element.

Buttons with Standalone Icons

If you have very little space to work with, use button-icon-standalone to show a button with nothing but a standalone icon.

Be sure to describe the purpose of the button through the title and aria-label attributes, or equivalent, to help out screen readers and other assistive tools.

For the sake of a consistent user experience, do this only where strictly necessary. Prefer regular buttons with icon and text wherever possible.

Icon standalone button

				

Button Widths

By default, buttons will be just as wide as they need to be for the text to fit. However, if they directly follow blocky elements, it may be desirable to have them aligned on both sides with the preceding element.

In such cases, you can use the width classes as you would on any other element. The button will then be inflated to the specified size, while the text will stay centered.

Wide button
<input type="text" class="input-text one-whole" placeholder="Some input" />
<button class="button-primary one-whole button-margin-vertical">
    Wiiide Button
</button>

Optional Button Margins

By default, buttons come without margins applied to them. Your designer might require you to use the default margins around your buttons, though. If that is the case, use the class button-margin or any of the following, depending on your use case:

  • button-margin-left
  • button-margin-right
  • button-margin-horizontal
  • button-margin-top
  • button-margin-bottom
  • button-margin-vertical

Optional button margins (background added for emphasis)
<a class="button-secondary button-margin">
	Button With Margins Applied
</a>