Button

Buttons are used to initialize an action. The button label should clearly desrcibe what happens when the user interacts with it.

Usage

Blue button White button Danger button Gray button

<a className="c-button" href="#">Blue button</a>
<a className="c-button c-button--white ml-4" href="#">White button</a>
<a className="c-button c-button--red ml-4" href="#">Danger button</a>
<a className="c-button c-button--gray ml-4" href="#">Gray button</a>

Implementation

Type	Name
Elements
Buttons	`.c-button`
Modifiers
Color	`.c-button--white` `.c-button--red` `.c-button--gray`
Size	`.c-button--xs` `.c-button--sm` `.c-button--lg`
States
Disabled	`.c-button--disabled` `.c-button--{color}-disabled`
Inactive	`.c-button--inactive` `.c-button--{color}-inactive`

Modifiers

Color

Use specific buttons color depending on the effect of its action:

Use .c-button for primary actions, such as "Confirm", "Save", "Create", or to highlight a call to action on a page.
Use .c-button--white for secondary actions, such as "Cancel".
Use .c-button--red for desctructive actions such as deleting.
Use .c-button-gray for buttons on dark backgrounds.

Blue button White button Danger button Gray button

<a className="c-button" href="#">Blue button</a>
<a className="c-button c-button--white ml-4" href="#">White button</a>
<a className="c-button c-button--red ml-4" href="#">Danger button</a>
<a className="c-button c-button--gray ml-4" href="#">Gray button</a>

Size

Use specific button sizes depending on its context as well as action.

On the homepage:
- Use the base .c-button by default.
- Use .c-button--lg to put more attention to the button.
Within in the app:
- Use .c-button--sm by default.
- Use .c-button--xs to save horizontal space.

Large button Base button Small button Extra small button

<a className="c-button c-button--lg" href="#">Large button</a>
<a className="c-button ml-4" href="#">Base button</a>
<a className="c-button c-button--sm ml-4" href="#">Small button</a>
<a className="c-button c-button--xs ml-4" href="#">Extra small button</a>

Icons

Base button

<a className="c-button ml-4" href="#">
  Base button <FontAwesomeIcon className="c-button__icon" icon={faTimes} />
</a>

States

Disabled

Use .c-button--disabled for buttons that are disabled. For example, when another action has to be completed before the button is usable, such as changing a text field value or waiting for a system response.

Disabled button Disabled button Disabled button Disabled button

<a className="c-button c-button--disabled" href="#" disabled>Disabled button</a>
<a className="c-button c-button--white c-button--white-disabled ml-4" href="#" disabled
  >Disabled button</a
>
<a className="c-button c-button--red c-button--red-disabled ml-4" href="#" disabled>Disabled button</a>
<a className="c-button c-button--gray c-button--gray-disabled ml-4" href="#" disabled
  >Disabled button</a
>

Inactive

Use .c-button--inactive for buttons that are not active, for instance in a button group.

Active Inactive

<div className="flex space-x-4">
  <div className="c-button-group">
    <a className="c-button-group__item c-button-group__item-first c-button" href="#">
      Active
    </a>
    <a
      className="c-button-group__item c-button-group__item-last c-button c-button--inactive"
      href="#"
    >
      Inactive
    </a>
  </div>
  <div className="c-button-group">
    <a
      className="c-button-group__item c-button-group__item-first c-button c-button--white"
      href="#"
    >
      Active
    </a>
    <a
      className="c-button-group__item c-button-group__item-last c-button c-button--white c-button--white-inactive"
      href="#"
    >
      Inactive
    </a>
  </div>
  <div className="c-button-group">
    <a className="c-button-group__item c-button-group__item-first c-button c-button--red" href="#">
      Active
    </a>
    <a
      className="c-button-group__item c-button-group__item-last c-button c-button--red c-button--red-inactive"
      href="#"
    >
      Inactive
    </a>
  </div>
  <div className="c-button-group">
    <a className="c-button-group__item c-button-group__item-first c-button c-button--gray" href="#">
      Active
    </a>
    <a
      className="c-button-group__item c-button-group__item-last c-button c-button--gray c-button--gray-inactive"
      href="#"
    >
      Inactive
    </a>
  </div>
</div>