Buttons

Button styles for actions in forms, modals, as standalone elements, etc.

Notice button labels are sentence case.

Apply the .btn class to the <button/> element to make them look like buttons. Adjust the button sizing with .btn--lg for larger buttons and .btn--sm for smaller buttons (only available on desktops).

<button type="button" class="btn btn--sm">Small button</button> <button type="button" class="btn">Regular button</button> <button type="button" class="btn btn--lg">Large button</button>

Variants

Button variants offer predefined styles to visually establish their sematic purposes when a page has multiple actions that are not equal in usage.

Variant Purpose
Primary Strong visual weight. Used to convey a positive action.
Secondary Weak visual weight. Used to convey a secondary action or option.
Neutral Weakest visual weight.
CTA Strongest visual weight. Used to convey a more preferred action.
<button type="button" class="btn btn--primary" role="button">Primary button</button> <button type="button" class="btn btn--secondary" role="button">Secondary button</button> <button type="button" class="btn btn--neutral" role="button">Neutral button</button> <button type="button" class="btn btn--cta" role="button">CTA button</button>

Tags

You may also use the .btn class on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Link
<a class="btn" href="#" role="button">Link</a> <button class="btn" type="submit">Button</button> <input class="btn" type="button" value="Input"> <input class="btn" type="submit" value="Submit"> <input class="btn" type="reset" value="Reset">

Reverse

Useful on darker backgrounds.

<button type="button" class="btn btn--reverse btn--sm">Small button</button> <button type="button" class="btn btn--reverse">Regular button</button> <button type="button" class="btn btn--reverse btn--lg">Large button</button>

Icons

Add extra visual direction with icons. See Icons for library and usage.

Play video
<button type="button" class="btn btn--sm icon-video-resource">Play video</button> <button type="button" class="btn icon-video-resource">Play video</button> <a href="#" class="btn btn--lg icon-video-resource" role="button">Play video</a> <hr class="divider"/> <button type="button" class="btn btn--sm"><img src="" data-icon="global/color/logo-checkmark-green.svg">Regular button</button> <button type="button" class="btn"><img src="" data-icon="global/color/logo-checkmark-green.svg">Regular button</button> <button type="button" class="btn btn--lg"><img src="" data-icon="global/color/logo-checkmark-green.svg">Regular button</button>

Block

Make buttons fill the width of it's parent container with .btn--block.

<button class="btn btn--block" type="button">Default button block</button> <button class="btn btn--block btn--primary" type="button">Primary button block</button> <button class="btn btn--block btn--secondary" type="button">Secondary button block</button> <button class="btn btn--block btn--neutral" type="button">Neutral button block</button> <button class="btn btn--block btn--cta" type="button">CTA button block</button>

Disabled

Disabled buttons appear inactive by adding the disabled boolean attribute to <button> elememts.

For buttons using <a> element, use the .disabled class to make them appear inactive. Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies and tabindex="-1" to prevent them from receiving keyboard focus. Additionally, it is best practice to use custom JavaScript to disable functionality.

CTA button
<button type="button" class="btn" disabled>Button</button> <button type="button" class="btn btn--primary" disabled>Primary button</button> <button type="button" class="btn btn--secondary" disabled>Secondary button</button> <button type="button" class="btn btn--neutral" disabled>Neutral button</button> <a href="#" class="btn btn--cta disabled" tabindex="-1" role="button" aria-disabled="true">CTA button</a>

The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized.

results matching ""

    No results matching ""