Desktop, Tablet & MobilePrimary & Secondary
Buttons should be straightforward that succinctly indicate the action a user can expect upon clicking them. All buttons should be Sentence case and descriptive. Avoid vague language like “Learn more”, “Click here” and “Get started”.
-
// Standard blue button - with no icon
<a href="#!" role="button"><span class="btn btn__blue">Action</span>
// Standard Tint button - with blue text on top
<a href="#!" role="button"><span class="btn btn__tint-blue">Action</span></a>
// Dark blue button in the blue background
<a href="#!" role="button"><span class="btn btn__dark-blue">Action</span></a>
// White with blue text button in the blue background
<a href="#!" role="button"><span class="btn btn__white-blue">Action</span></a>
// Blue button - with the icon to the left
<a href="#!" role="button">
<span class="btn btn__blue">
<span class="icon icon__pin">
<svg alt=""><use xlink:href="../../themes/images/icons/symbol-defs.svg#icon__pin"></use></svg>
</span>
<span>Find a store</span>
</span>
</a>
// Tint button - with the icon to the left
<a href="#!" role="button">
<span class="btn btn__tint-blue">
<span class="icon icon__pin">
<svg alt=""><use xlink:href="../../themes/images/icons/symbol-defs.svg#icon__pin"></use></svg>
</span>
<span>Find a store</span>
<span>
</a> -
// Standard green button - with no icon
<a href="#!" role="button"><span class="btn btn__green">Action</span>
// Standard tint button - with green text on top
<a href="#!" role="button"><span class="btn btn__tint-green">Action</span></a>
// Dark green button in the green background
<a href="#!" role="button"><span class="btn btn__dark-green">Action</span></a>
// White with green text button in the green background
<a href="#!" role="button"><span class="btn btn__white-green">Action</span></a>
// Green button - with the icon to the left
<a href="#!" role="button">
<span class="btn btn__green">
<span class="icon icon__pin">
<svg alt=""><use xlink:href="../../themes/images/icons/symbol-defs.svg#icon__pin"></use></svg>
</span>
<span>Find a store</span>
</span>
</a>
// Tint button - with the icon to the left
<a href="#!" role="button">
<span class="btn btn__tint-green">
<span class="icon icon__pin">
<svg alt=""><use xlink:href="../../themes/images/icons/symbol-defs.svg#icon__pin"></use></svg>
</span>
<span>Find a store</span>
<span>
</a> -
Web accessibility
Each button should have a corresponding aria-label that more completely describes the action of the button. For instance, "Shop now" would have an aria-label of "Shop beauty and personal care".
Desktop, Tablet & MobileMarketing Buttons
-
// Standard teal button - with no icon
<a href="#!" role="button"><span class="btn btn__teal">Action</span>
// Standard tint button - with dark teal text on top
<a href="#!" role="button"><span class="btn btn__tint-teal">Action</span></a>
// Dark teal button in the teal background
<a href="#!" role="button"><span class="btn btn__dark-teal">Action</span></a>
// White with teal text button in the teal background
<a href="#!" role="button"><span class="btn btn__white-teal">Action</span></a>
// Teal button - with the icon to the left
<a href="#!" role="button">
<span class="btn btn__teal">
<span class="icon icon__pin">
<svg alt=""><use xlink:href="../../themes/images/icons/symbol-defs.svg#icon__pin"></use></svg>
</span>
<span>Find a store</span>
</span>
</a>
// Tint teal button - with the icon to the left
<a href="#!" role="button">
<span class="btn btn__tint-teal">
<span class="icon icon__pin">
<svg alt=""><use xlink:href="../../themes/images/icons/symbol-defs.svg#icon__pin"></use></svg>
</span>
<span>Find a store</span>
<span>
</a> -
// Standard pink button - with no icon
<a href="#!" role="button"><span class="btn btn__pink">Action</span>
// Tint pink button - with dark pink text on top
<a href="#!" role="button"><span class="btn btn__tint-pink">Action</span></a>
// Dark pink button in the pink background
<a href="#!" role="button"><span class="btn btn__dark-pink">Action</span></a>
// White with pink text button in the pink background
<a href="#!" role="button"><span class="btn btn__white-pink">Action</span></a>
// Pink button - with the icon to the left
<a href="#!" role="button">
<span class="btn btn__pink">
<span class="icon icon__pin">
<svg alt=""><use xlink:href="../../themes/images/icons/symbol-defs.svg#icon__pin"></use></svg>
</span>
<span>Find a store</span>
</span>
</a>
// Tint pink button - with the icon to the left
<a href="#!" role="button">
<span class="btn btn__tint-pink">
<span class="icon icon__pin">
<svg alt=""><use xlink:href="../../themes/images/icons/symbol-defs.svg#icon__pin"></use></svg>
</span>
<span>Find a store</span>
<span>
</a>
Desktop, Tablet & MobileDisabled Button
-
<a href="#!" class="disabled" disabled="disabled"><span class="btn btn__disabled">Action</span></a>
Desktop, Tablet & MobilePair Button Group
When two alternative actions exist, but one is less important than the other, make the less important action a link. Place the primary button to the right or above the link. There is a margin of 25px between the secondary and primary buttons.
-
<span class="btn__pair">
<a href="#!" class="secondary">Secondary</a>
<a href="#!" role="button"><span class="btn btn__blue">Primary</span></a>
</span> -
<span class="btn__pair">
<a href="#!" class="secondary">Secondary</a>
<a href="#!" role="button"><span class="btn btn__blue">Primary</span></a>
</span>