Skip to Main Content
Warning!

This browser is not supported by the Playbook.

You should switch to a supported browser. Learn more

Toolkit
Toolkit

Buttons

These are the buttons used in the Demos. Click on the brackets icon to the right to reveal the code that creates each button and to see how it renders across different devices.

Primary Button

The primary button is used to indicate the primary user action.

<button class="lsc-button-primary">Button Text</button>

Secondary Button

The secondary button is used to indicate the secondary user action.

<button class="lsc-button-secondary">Button Text</button>

Tertiary Button

The tertiary button is used to indicate the tertiary user action.

<button class="lsc-button-tertiary">Button Text</button>

Icon Button

An icon button is a button of any style that includes an icon. The button should always include text, but the text may be visually hidden (as in this example). It should include a title attribute when the text is hidden to support accessibility.

<button class="lsc-button-tertiary lsc-button-icon lsc-icon-location-before" title="Button Text">
    <span class="lsc-accessible-text">Button Text</span>
</button>

Icon Buttons with Text

An icon button can also have visible text. The icon can be displayed on either side of the visible text by changing the psuedo-selector of the icon in the <button> class attribute. This is an example of an Icon Button with visible text coming before the icon. The text has a class of icon-name-before in the code snippet.

Icon Button with Text Before Icon

<button class="lsc-button-secondary lsc-button-icon lsc-icon-location-after">Button Text</button>

Icon Button with Text After Icon

This is an example of an icon button with visible text coming after the icon. The text has a class of icon-name-after in the code snippet.

<button class="lsc-button-primary lsc-button-icon lsc-icon-location-before">Button Text</button>