Button

Overview

Buttons provide users the ability to interact with the web page. 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 accessibility considerations.


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

When you should use this component

You should use buttons for important actions that you want the user to take like send message or save to draft.

Button labels should be clear and specific to the action that the user is taking.

Secondary buttons should be used to indicate less common actions and have less prominance as compared to primary buttons.

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

When you should use something else

If you are linking within pages in a site, you can use regular text links instead.


You can also 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 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>

has-addons modifier allows you to attach controls together

<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

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team