Button

Overview

Buttons allow users to take actions, and make choices, with a single tap.

Both <button> elements and <a> anchor elements can be styled as buttons. While their behaviours may be similar, they mean different things semantically and have different accessibility considerations.

Types

<button class="sgds-button is-primary">button</button>
<button class="sgds-button is-outlined is-primary">button</button>
<button class="sgds-button is-rounded is-primary">button</button>
<button class="sgds-button is-primary" disabled>button</button>

Additional Information

In the examples below, you can find references on how to group buttons, insert icons, attach controls and style text links.

You can insert icons from our library on any part of a button.

<button class="sgds-button">
    <span class="icon"><i class="sgds-icon sgds-icon-facebook"></i></span>
    <span>Facebook</span>
</button>
<button class="sgds-button">
    <span class="icon"><i class="sgds-icon sgds-icon-twitter"></i></span>
    <span>Twitter</span>
</button>
<button class="sgds-button">
    <span class="icon"><i class="sgds-icon sgds-icon-facebook"></i></span>
    <span>Facebook</span>
</button>
<button class="sgds-button">
    <span class="icon"><i class="sgds-icon sgds-icon-download"></i></span>
</button>

You can group buttons together on a single line using the sgds-buttons modifier on the container.

<div class="sgds-buttons">
    <button class="sgds-button is-primary">Save</button>
    <button class="sgds-button">Cancel</button>
    <button class="sgds-button is-danger">Delete</button>
</div>

You can attach controls together with the has-addons modifier.

<div class="field has-addons">
    <div class="control"><button class="sgds-button">Yes</button></div>
    <div class="control"><button class="sgds-button">Maybe</button></div>
    <div class="control"><button class="sgds-button">No</button></div>
</div>

You can use the secondary button for reducing visual prominence. It should not be used as a call to action button.

<button href="" class="sgds-sec-button">
    <span>
        Default Size
    </span>
</button><br>
<button href="" class="sgds-sec-button is-small">
    <span>
         .is-small
    </span>
</button><br>
<button href="" class="sgds-sec-button is-medium">
    <span>
         .is-medium
    </span>
</button><br>
<button href="" class="sgds-sec-button is-large is-info">
    <span>
        is-large.is-info
    </span>
</button>

Style

Modifier	Description
is-fullwidth	Button with width that span the full width of a parent
is-outlined	Display button in border only
is-rounded	Display button with rounded edges
is-static	Display as a non-interactive button.
disabled	Use as an attribute for disable state

When to use

Buttons should be used for:

Important actions that you want your users to take.

For example, send messages or save drafts.
Button labels should be clear and specific to the users.
Secondary buttons should be used to indicate less common actions. They should also have less prominence as compared to primary buttons.

Buttons should not be used for:

Linking pages in a site.

You should consider using regular texts links instead.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component