Button

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
button
default
button
.is-outlined
button
.is-rounded
button
disabled
<a class="sgds-button is-primary">button</a>

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

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

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">
        <a class="sgds-button is-primary">Save</a>
    </p>
</div>

You can use buttons as addons with the has-addons modifier on the field container.

<div class="field has-addons">
    <p class="control">
        <a class="sgds-button">Yes</a>
    </p>
</div>

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-outlined Display button in border only
is-rounded Display button with rounded edges
disabled Use when button is disabled

Feedback

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

Tell us more