Buttons¶

CSS classes for styling HTML button elements.

Usage¶

There are default, primary, secondary, & tertiary styles of buttons along with a set of dark-primary, dark-secondary, and dark-tertiary styles

g-button Default
g-button-primary
g-button-secondary
g-button-tertiary
g-button-dark-primary
g-button-dark-secondary
g-button-dark-tertiary

<button class="g-button">Default</button>
<button class="g-button-primary">Primary</button>
<button class="g-button-secondary">Secondary</button>
<button class="g-button-tertiary">Tertiary</button>
<div class="u-bg-gray-5 u-p u-my">
    <button class="g-button-dark-primary">Dark Primary</button>
    <button class="g-button-dark-secondary">Dark Secondary</button>
    <button class="g-button-dark-tertiary">Dark Tertiary</button>
</div>

Variations¶

Add the following classes to a g-button or g-button-(primary,secondary,tertairy...) element to further customize it

Button Widths¶

These classes typically remove the button's left/right-padding, set a max-width: 100%, and then specific width value.

g-button-width--icon
g-button-width--xsmall
g-button-width--small
g-button-width--regular
g-button-width--large
g-button-width--full

<button class="g-button g-button-width--icon"><span class="u-icon-heart-full"></span></button>
<button class="g-button g-button-width--xsmall">xs</button>
<button class="g-button g-button-width--small">Small</button>
<button class="g-button g-button-width--regular">Regular</button>
<button class="g-button g-button-width--large">Large</button>
<hr>
<button class="g-button g-button-width--full">Full Width</button>

Button Sizes¶

These classes primarily focus on the button's font-size & padding values.

g-button--xsmall
g-button--small
g-button is medium by default
g-button--large
g-button--xlarge

<button class="g-button g-button--xsmall">Tiny Button</button>
<button class="g-button g-button--small">Small Button</button>
<button class="g-button">Medium Button</button>
<button class="g-button g-button--large">Large Button</button>
<button class="g-button g-button--xlarge">Huge Button</button>

Disabled State¶

Styles will automatically apply when the disabled attribute is added to a g-button.

<button class="g-button" disabled>Can't click me</button>

All Variations of the Disabled State¶

<button class="g-button" disabled>Default</button>
<button class="g-button g-button-width--icon" disabled><span class="u-icon-heart-full"></span></button>
<button class="g-button-primary" disabled>Primary</button>
<button class="g-button-primary g-button-width--icon" disabled><span class="u-icon-heart-full"></span></button>
<button class="g-button-secondary" disabled>Secondary</button>
<button class="g-button-secondary g-button-width--icon" disabled><span class="u-icon-heart-full"></span></button>
<button class="g-button-tertiary" disabled>Tertiary</button>
<button class="g-button-tertiary g-button-width--icon" disabled><span class="u-icon-heart-full"></span></button>
<button class="g-button-dark-primary" disabled>Dark Primary</button>
<button class="g-button-dark-primary g-button-width--icon" disabled><span class="u-icon-heart-full"></span></button>
<button class="g-button-dark-secondary" disabled>Dark Secondary</button>
<button class="g-button-dark-secondary g-button-width--icon" disabled><span class="u-icon-heart-full"></span></button>
<button class="g-button-dark-tertiary" disabled>Dark Tertiary</button>
<button class="g-button-dark-tertiary g-button-width--icon" disabled><span class="u-icon-heart-full"></span></button>

Error State¶

Add the has-error state-class to a button (or the parent of a button) to show there there is an error with the button/form.

<button class="g-button has-error">Button</button>
<label class="has-error">
    <button class="g-button">Button</button>
</label>

All Variations of the Error State¶

<button class="g-button has-error">Default</button>
<button class="g-button g-button-width--icon has-error"><span class="u-icon-heart-full"></span></button>
<button class="g-button-primary has-error">Primary</button>
<button class="g-button-primary g-button-width--icon has-error"><span class="u-icon-heart-full"></span></button>
<button class="g-button-secondary has-error">Secondary</button>
<button class="g-button-secondary g-button-width--icon has-error"><span class="u-icon-heart-full"></span></button>
<button class="g-button-tertiary has-error">Tertiary</button>
<button class="g-button-tertiary g-button-width--icon has-error"><span class="u-icon-heart-full"></span></button>
<button class="g-button-dark-primary has-error">Dark Primary</button>
<button class="g-button-dark-primary g-button-width--icon has-error"><span class="u-icon-heart-full"></span></button>
<button class="g-button-dark-secondary has-error">Dark Secondary</button>
<button class="g-button-dark-secondary g-button-width--icon has-error"><span class="u-icon-heart-full"></span></button>
<button class="g-button-dark-tertiary has-error">Dark Tertiary</button>
<button class="g-button-dark-tertiary g-button-width--icon has-error"><span class="u-icon-heart-full"></span></button>

Unstyled Buttons / Link Buttons¶

You can add the modifier class g-button--no-styling to <button> & <input type="button|submit"> to remove the padding, background, and border of a button.

This allows you to easily style buttons like a link or other inline text copy.

<button class="g-button--no-styling">Unstyled Buttons</button>
<button class="g-button--no-styling g-regular-link">Button with "Regular Link" styles</button>
<button class="g-button--no-styling g-default-link">Button with "Default Link" styles</button>