Buttons

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.

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

Secondary Button

Secondary buttons are kind of standard buttons on IS24.

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

Ghost Button

Ghost buttons are tertiary buttons on IS24.

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

Elements

Buttons can be made from

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

<a class="button-primary">
    I Am an &lt;a&gt;
</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.

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

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

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

Input-Sized Buttons

When used in standard forms (within form elements), buttons can be sized slightly differently with use of the class button-input-sized to go along with the height of an input field of the same font size.

Please note that this works only for button elements (<button>) and submit buttons (<input type="submit" />).

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.

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

<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.

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

<a class="button-secondary button-icon-only button-s">
  <span class="icon fa fa-pencil"></span>
</a>
<a class="button-secondary button-icon-only button-m button-margin-horizontal">
  <span class="icon fa fa-pencil"></span>
</a>
<a class="button-secondary button-icon-only button-l">
  <span class="icon fa fa-pencil"></span>
</a>

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.

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.

<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

<a class="button-secondary button-margin">
	Button With Margins Applied
</a>