6 buttons Buttons

Open in new window

These button classes can be added to buttons, inputs, or links. Size classes and theme classes can be combined.

Examples
Default styling
Link
:hover
Highlight the button when hovered with a cursor.
Link
:disabled
Make the button change appearance to reflect it being disabled.
Link
:active
The button is pressed down.
Link
:focus
The button is focused with keyboard navigaiton.
Link
.button-sm
small modifier
Link
.button-lg
large modifier
Link
.button-xl
extra large modifier
Link
.warning-button
normal button with red hover state
Link
.primary-button
This is the primary variation.
Link
.secondary-button
This is the secondary button.
Link
.link-button
style a button like a link
Link
Markup: ../../../../../styleguide/styleguide-examples/button.njk 
<div class="sumo-button-wrap in-styleguide">
  <a href="#" class="sumo-button ">Link</a>
  <button class="sumo-button ">Button Element</button>
  <input type="submit" class="sumo-button " value="input[type='submit']"/>
</div>
Source: ../kitsune/sumo/static/sumo/scss/base/forms/_buttons.scss, line 4

6.1 buttons.button-wrap Button Wrap element

Open in new window

The .mzp-c-button-wrap class can be applied to a wrapper around a group of buttons or inline fields. It applies a flexbox context with justify-content: flex-start;, so the default layout is to justify buttons to the left. Modifier classes can be added to change various layout properties.

In addition to the modifier classes that can be added to the .mzp-c-button-wrap element, .push-right, .push-left, and .last-on-mobile classes can be added to buttons to break items away from the defaults.

In most cases, the preferred combination is .mzp-c-button-wrap.align-full, with the primary action ("Save" or "Submit", for example) being listed first so it appears on the left, with the optional secondary action ("Cancel") appearing on the right. There are exceptions to this rule, so the utility classes below can be used to create various combinations.

Examples
Default styling
.align-end
Align buttons to the right
.align-full
Justify buttons to the left and right
.align-center
Justify buttons to the center
.reverse-on-desktop.align-full
This is useful when a primary action is first on mobile, and on the right on desktop.
.full-width-on-mobile
make buttons stretch to fill the container on mobile
Markup: ../../../../../styleguide/styleguide-examples/button-wrap.njk 
<div class="sumo-button-wrap in-styleguide ">
  <button class="sumo-button primary-button">Submit</button>
  <button class="sumo-button secondary-button">Clear</button>
</div>
Source: ../kitsune/sumo/static/sumo/scss/base/forms/_button-wrap.scss, line 4