13Buttons
Mostly copied from Foundation except using BEM classes. Not using Foundation padding since it is inflexible and can only be defined in with rem units. Use em padding instead to allow padding to remain consistent with font-size. Buttons may have an icon. When present, the icon is placed on the left hand side of the label text and matches the style and behavior of the button.
Examples with an icon
<div class="kss-button-box">
<p>.button</p>
<button class="button">button</button>
</div>
<div class="kss-button-box">
<p>.button .button--small</p>
<button class="button button--small">small button</button>
</div>
<div class="kss-button-box">
<p>.button .button--disabled</p>
<button class="button button--disabled">button disabled</button>
</div>
<div class="kss-button-box">
<p>.button .button--secondary</p>
<button class="button button--secondary">button</button>
</div>
<div class="kss-button-box">
<p>.button .button--secondary .button--small</p>
<button class="button button--secondary button--small">small button</button>
</div>
<div class="kss-button-box">
<p>.button .button--secondary .button--disabled</p>
<button class="button button--secondary button--disabled">button disabled</button>
</div>
<div class="kss-button-box">
<p>.button .button--facebook</p>
<button class="button button--facebook">
<svg class="svg-icon svg-icon--white" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--facebook-sign-in"></use></svg>
Facebook button
</button>
</div>
<div class="kss-button-box">
<p>.button .button--twitter</p>
<button class="button button--twitter">
<svg class="svg-icon svg-icon--white" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--social-twitter"></use></svg>
Twitter button
</button>
</div>
<div class="kss-button-box">
<p>.button .button--small-expand</p>
<button class="button button--small-expand">button</button>
</div>
<div class="kss-button-box">
<p>.button .button--medium-expand</p>
<button class="button button--medium-expand">button</button>
</div>
<div class="kss-button-box">
<p>.search-card__button .sy-rounded-focus</p>
<button style="display: inline-block;" class="search-card__button sy-rounded-focus">button</button>
</div>
<div class="kss-button-box">
<p>.search-card__button .search-card__button--secondary .sy-rounded-focus</p>
<button style="display: inline-block;" class="search-card__button search-card__button--secondary sy-rounded-focus">
<svg style="bottom: -2px;" class="svg-icon svg-icon--medium-navy" role="presentation"><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--preferences"></use></svg>
<span>button</span>
</button>
</div>
<div class="kss-button-box">
<p>.user-logout .button button--secondary .button--expand</p>
<button style="display: inline-block;" class="user-logout button button--secondary button--expand test-logout show-for-large">button</button>
</div>
<style type="text/css">
.btns-example-block {
display: flex;
}
.btns-example-block h5 {
width: 300px;
}
.btns-example-block hr {
width: 100%;
}
</style>
<div class="btns-example-block">
<h5>Examples with an icon</h5>
<hr>
</div>
<div class="kss-button-box">
<p>.button .button--medium-expand</p>
<button class="button button--medium-expand">
<svg class="svg-icon svg-icon--white svg-icon--small mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--external"></use></svg>
Complete Next Steps
</button>
</div>
<div class="kss-button-box">
<p>.button .button--secondary</p>
<button class="button button--secondary">
<svg class="svg-icon svg-icon--black" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--filter"></use></svg>
Filter
</button>
</div>
<div class="kss-button-box">
<p>.button .button--secondary with icon only</p>
<button class="button button--secondary">
<svg class="svg-icon svg-icon--black" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--message"></use></svg>
</button>
</div>
13.4.3Button/Link Hierarchy
Buttons and links can be used together on a component in which case the hierarchy of available actions should be represented per the pyramid above where primary button represents the most likely/desired action and secondary link represents the least likely/useful action to take.
<img class="mb1" src="/styleguide/images/buttons_hierarchy.png" alt="buttons-hierarchy">