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

Button Types
Elements
Button Sizes
Disabling Buttons
Buttons with Icons
Button Widths
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

<button class="button-primary">
    Submit
</button>

Secondary Button

Secondary buttons are kind of standard buttons on IS24.

Secondary button

<button class="button-secondary">
	Submit
</button>

Ghost Button

Ghost buttons are tertiary buttons on IS24.

Ghost button

<button class="button">
	Submit
</button>

Elements

Buttons can be made from

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

Same button, different elements

<a class="button-primary">
    I Am an &lt;a&gt;
</a>

I Am an <a>

<button class="button-primary">
    I Am a &lt;button&gt;
</button>

<input type="submit" class="button-primary"
       value="I Am an &lt;input&gt;" />

Button Sizes

Large buttons—i.e. button-l—should only be used once on a page per type (i.e. one large primary and one large secondary button) while regular buttons and .button-ss can be used more often on a page but only once withion a group/UI/section.

Secondary button in different sizes

<button class="button-secondary button-l">
	Submit
</button>

<button class="button-secondary">
	Submit
</button>

<button class="button-secondary button-s">
	Submit
</button>

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.

Be sure to use button-icon-only on the button and icon on the icon element.

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.

Be careful using buttons with icons only. Understanding icons without labels is hard, because it strongly depends on user’s cultural background, social status and education how they interprete them. In order to guarantee one user experience, use buttons with icons and text. Use Buttons with icons only rarely and only if there is no space for a proper button with icons and text.

Buttons with icons

<a class="button-primary">
  <span class="fa fa-comments"></span>
  Leave a Comment
</a>

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>

Button With Margins Applied