# Button

This page contains all possible variations of the CSS button component. You can either scroll and see all examples with all documented parameters and modifiers or you can use quick links above.

# Primary

Use the class .goco-c-button for form and page actions. These are used extensively around the site. When using a <button> element, always specify a type.

<button class="goco-c-button">Button</button>

# Monochrome

Each button size can have a monochrome state. To change button type to monochrome you can use the modifier --monochrome

<button class="goco-c-button goco-c-button--monochrome">Button</button>

# Ghost black

Each button size can have a ghost black state. To change button type to ghost black you can use the modifier --ghost-black

<button class="goco-c-button goco-c-button--ghost-black">Button</button>

# Ghost white

Each button size can have a ghost white state. To change button type to ghost white you can use the modifier --ghost-white

<button class="goco-c-button goco-c-button--ghost-white">Button</button>

# Link Button

Any button can be transformed and used as <a> tag. This option is suggested if your button is going to redirect a user to a different URL or page. When using a <a> element, always add role="button". Setting role is needed for better accessibility. Adding role="button" will make an element appear as a button control to a screen reader.

NOTE

All other modifiers provided in this documentation are also applicable to Link Button.

<a href="#link-button" class="goco-c-button" role="button">Button link</a>

# Sizing

There are 2 additional sizes of the button available, small, and large

# Small

<button class="goco-c-button goco-c-button--small">Small button</button>

# Large

<button class="goco-c-button goco-c-button--large">Large button</button>

# Full Width

<button class="goco-c-button goco-c-button--full-width">Button</button>

# Full Width (Mobile Only)

Creates a full width button for mobile screen sizes

<button class="goco-c-button goco-c-button--full-width-mobile">Button</button>

# Disabled

Each button can be disabled. To apply the disabled state to the button add the disabled html attribute.

<button class="goco-c-button" disabled>Disabled button</button>

# With icon

Each button can be supported with an SVG icon of your preference. In order to add icon to your button add the SVG code of the icon of your preference.

WARNING

Icon may not display correctly on small size of the Button.

# Right icon

<button class="goco-c-button">
  Button with icon
  <svg aria-hidden="true" focusable="false" class="goco-c-button__icon goco-c-button__icon--right" viewBox="0 0 20 20">
    <path fill="currentColor" d="M6.186 20c-.884 0-1.681-.565-2.02-1.429a2.413 2.413 0 01.474-2.52l5.748-6.08L4.64 3.892c-.803-.912-.78-2.333.054-3.214A2.103 2.103 0 017.733.62l7.294 7.715a2.41 2.41 0 010 3.27l-7.294 7.715A2.13 2.13 0 016.186 20z"/>
  </svg>
</button>

# Left icon

<button class="goco-c-button goco-c-button--ghost-black">
  <svg aria-hidden="true" focusable="false" class="goco-c-button__icon goco-c-button__icon--left" viewBox="0 0 20 20">
    <path fill="currentColor" d="M18 8h-6V2a2 2 0 10-4 0v6H2a2 2 0 100 4h6v6a2 2 0 104 0v-6h6a2 2 0 100-4z"/>
  </svg>
  Button with icon
</button>

# With loader

Each button has a loading state available. This can be applied to buttons of any type and size. To apply this state to your button, you can use the following modifier: goco-c-button--loading. To use the spinner you will need to include the SVG icon wrapped with a div with the following class: goco-c-button__spinner

NOTE

The correct variant of the spinner will automatically apply to the to any button type.

<button class="goco-c-button goco-c-button--loading">
  Button
  <div class="goco-c-button__spinner">
    <svg aria-hidden="true" focusable="false" viewBox="0 0 20 20">
      <path fill="currentColor" d="M11.568 10.732H20v9.01h-3.165v-3.329C15.425 18.737 13.065 20 9.525 20 4.173 20 0 15.495 0 10.043 0 4.275 4.403 0 10.043 0c3.712 0 6.561 1.607 8.547 4.706l-3.137 1.922c-1.208-1.779-3.194-3.041-5.295-3.041C6.618 3.587 4 6.284 4 10.014c0 3.96 3.08 6.457 6.1 6.457 2.245 0 3.914-.833 4.72-2.726h-3.252v-3.013z" />
    </svg>
  </div> 
</button>

← Grid Input →