4 :
Buttons

Your standard button suitable for clicking. For even spacing/consistent placement, buttons can be wrapped in the .has-buttons context class.

  • Primary Button: Indicates button is the primary action. Colors are site-specific.
  • Secondary Button: A gray button used for Cancel and other secondary actions.
  • Tertiary Button: A white button used for additional actions.

    Button Positioning with the .has-buttons Context

    Buttons should always be positioned with the primary button the closest to the edge of the window. You have several options for positioning with .has-buttons:

  • left-aligned (.has-buttons)
  • right-aligned (.has-buttons-right)
  • vertically-aligned (.has-buttons-vertical)

    Backgrounds can be applied to all three using standard background color classes (eg. .has-background-primary). When one is in place, inner padding should be applied if it is not a global background class.

    For more information see the buttons page on the Sears Pattern Library.

.has-buttons
.has-buttons.has-background-secondary
.has-buttons-right
.has-buttons-vertical

<h5>.has-buttons</h5>
<div class="has-buttons">
  <button class="button-primary" href="#">Primary Button</button>
  <button class="button-secondary" href="#">Secondary/Default Button</button>
  <button class="button-tertiary" href="#">Tertiary Button</button>
</div>

<h5>.has-buttons.has-background-secondary</h5>
<div class="has-buttons has-background-secondary">
  <button class="button-primary" href="#">Primary Button</button>
  <button class="button-secondary" href="#">Secondary/Default Button</button>
  <button class="button-tertiary" href="#">Tertiary Button</button>
</div>

<h5>.has-buttons-right</h5>
<div class="has-buttons-right">
  <button class="button-tertiary" href="#">Tertiary Button</button>
  <button class="button-secondary" href="#">Secondary/Default Button</button>
  <button class="button-primary" href="#">Primary Button</button>
</div>

<h5>.has-buttons-vertical</h5>
<div class="has-buttons-vertical">
  <button class="button-primary" href="#">Primary Button</button>
  <button class="button-secondary" href="#">Secondary/Default Button</button>
  <button class="button-tertiary" href="#">Tertiary Button</button>
</div>