# 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. Button Sizes
4. Disabling Buttons
5. Buttons with Icons
6. Buttons with Standalone Icons
7. Text Button/Link Text
8. Button Widths
9. 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

Show 121 search results

## Button Sizes

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

Secondary button in different sizes

    <button class="button-secondary">
    	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.

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

Leave a Comment

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

## Text Button/Link Text

You can also style buttons to look like plain text links. This way, you can choose the most appropriate semantic element for your use case.

Link Text

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