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.

    Feedback

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

    Chat with the team