Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Button

This page documents the different button skins and types.

Button highlights

# 
<button class="c-button c-button--highlights" type="button">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
<button class="c-button c-button--highlights" type="button" disabled="disabled">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
+c-button({skin: 'highlights'}) Button label
+c-button({skin: 'highlights'})(disabled) Button label

Button primary

# 
<button class="c-button c-button--primary" type="button">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
<button class="c-button c-button--primary" type="button" disabled="disabled">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
+c-button({skin: 'primary'}) Button label
+c-button({skin: 'primary'})(disabled) Button label

Button secondary

# 
<button class="c-button c-button--secondary" type="button">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
<button class="c-button c-button--secondary" type="button" disabled="disabled">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
+c-button({}) Button label
+c-button({})(disabled) Button label

Button danger secondary

# 
<button class="c-button c-button--danger-secondary" type="button">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
+c-button({skin: 'danger-secondary'}) Button label

Button danger

# 
<button class="c-button c-button--danger" type="button">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
<button class="c-button c-button--danger" type="button" disabled="disabled">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
+c-button({skin: 'danger'}) Button label
+c-button({skin: 'danger'})(disabled) Button label

Button warning

# 
<button class="c-button c-button--warning" type="button">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
<button class="c-button c-button--warning" type="button" disabled="disabled">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
+c-button({skin: 'warning'}) Button label
+c-button({skin: 'warning'})(disabled) Button label

Button borderless

# 
<button class="c-button c-button--borderless" type="button">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
+c-button({skin: 'borderless'}) Button label

Text + icon button

#

A button with text and an icon.

<button class="c-button c-button--secondary" type="button">
    <span class="c-button__content">
        <div class="o-svg-icon o-svg-icon-edit  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
            </svg>
        </div>
        <span class="c-button__label">Button label</span>
    </span>
</button>
+c-button({ icon: 'edit'}) Button label

Text + icon button (right side)

#

A button with text and an icon on the right side.

<button class="c-button c-button--secondary" type="button">
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
        <div class="o-svg-icon o-svg-icon-calendar  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 2C9.55228 2 10 2.44772 10 3V4H14V3C14 2.44772 14.4477 2 15 2C15.5523 2 16 2.44772 16 3V4H19C20.1046 4 21 4.89543 21 6V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V6C3 4.89543 3.89543 4 5 4H8V3C8 2.44772 8.44772 2 9 2ZM8 6H5V9H19V6H16V7C16 7.55228 15.5523 8 15 8C14.4477 8 14 7.55228 14 7V6H10V7C10 7.55228 9.55228 8 9 8C8.44772 8 8 7.55228 8 7V6ZM19 11H5V19H19V11Z" fill="#595959" />
            </svg>
        </div>
    </span>
</button>
+c-button({ layout: 'text-icon', icon: 'calendar'}) Button label

A button (icon only)

#

A button with an icon only. Note the .u-sr-accessible class which lets screenreaders read the button label while hiding it in general.

<button class="c-button c-button--secondary c-button--icon" type="button">
    <span class="c-button__content">
        <div class="o-svg-icon o-svg-icon-add  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Button label
        </div>
    </span>
</button>
+c-button({ layout: 'icon-only', icon: 'add'}) Button label

Button loading

# 
<button class="c-button c-button--secondary c-button--loading" type="button" disabled="disabled">
    <div class="c-loader"></div>
    <span class="c-button__content">
        <span class="c-button__label">Button label</span>
    </span>
</button>
+c-button({ isLoading: true }) Button label

Possible parameters for button

Parameters Type Possible values Description
layout string text-icon, icon-only, default Determines the placement of the icon. The default layout is icon-text.
skin string primary, secondary, borderless, muted Determines how the button is visually rendered.
type string button, submit, reset The default value is button.
size string small Determines the size of the button
href string This can be any url or id. If this parameter is used then this button will automatically become a link.
icon string See icon style guide for available icons. This parameter is used for buttons with icons.
isBlock boolean true, false Determines if the button is a full width block button. The default state is false
isLink boolean true, false Determines if the button is a link button. The default state is false
isLoading boolean true, false Determines if the button has a loading state. The default state is false