Button is an ordinary, every-day element of interaction design. Although button looks like a very simple UI element, its design has changed a lot over the past decades. But still, button UX design is always about recognition and clarity



default

.is-outlined

.is-rounded

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

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>

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

<div class="field is-grouped">
    <p class="control">
        <button class="sgds-button is-primary">Save</button>
    </p>
</div>

has-addons modifier allows you to attach controls together

<div class="field has-addons">
    <p class="control">
        <button class="sgds-button">Yes</button>
    </p>
</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>

Guidelines

Button should:

  • Use labels that tell users what will happen when they click the button
  • User verbs that describe the action, such as Add or Delete
  • User no more than three words for button labels

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