Button

Buttons are used to draw attention to important actions that you want the users to take.



default

.is-outlined

.is-rounded

disabled
Component Code
<button class="sgds-button is-primary">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.

Component Code
<button class="sgds-button">
    <span class="icon"><i class="sgds-icon sgds-icon-facebook"></i></span>
    <span>Facebook</span>
</button>

You can group buttons together on a single line using the is-grouped modifier on the field container.

Component Code
<div class="field is-grouped">
    <div class="control">
        <button class="sgds-button is-primary">Save</button>
    </div>
    <div class="control">
        <button class="sgds-button">Cancel</button>
    </div>
    <div class="control">
        <button class="sgds-button is-danger">Delete</button>
    </div>
</div>

has-addons modifier allows you to attach controls together

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




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