Button

Buttons allow users to take significant action—submit a form, follow a user, create a record etc.

Default button

Default buttons can be used multiple times per screen and are used to draw focus to common actions which don't significantly impact the user experience.

<button class="Button" type="button">Button</button>

Semantic buttons

Occasionally, if an action is more significant, essential or impactful, one of three pronounced buttons can be used.

<!-- Signifies the primary action on a screen. -->
<button class="Button primary" type="button">Primary</button>

<!-- Signifies the most essential actions in a product and reinforces security. -->
<button class="Button positive" type="button">Positive</button>

<!-- Signifies a negative or potentially destructive action. -->
<button class="Button negative" type="button">Negative</button>

Sizes

There are two sizes available by adding a size1 or size2 class. Size 2 is the default.

<button class="Button size1" type="button">Size 1</button>
<button class="Button" type="button">Size 2</button>

Button with data

You can add an icon to support the button text and provide visual reinforcement. For best results, we recommend Feather icons. The icon is wrapped in a div to provide the necessary margin.

<button class="Button" type="button">
  <div class="mr-1">
    <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"></line>
      <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
  </div>
  Follow
</button>

Or you can put an icon on the right.

<button class="Button" type="button">
  More
  <div class="ml-1">
    <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="6 9 12 15 18 9"></polyline>
    </svg>
  </div>
</button>

If an icon is sufficient on its own, you can remove the button text.

<button class="Button" type="button">
  <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <line x1="12" y1="5" x2="12" y2="19"></line>
    <line x1="5" y1="12" x2="19" y2="12"></line>
  </svg>
</button>

Or you may need an icon with a chevron and no text.

<button class="Button" type="button">
  <div class="mr-1">
    <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="3"></circle>
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
    </svg>
  </div>
  <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="6 9 12 15 18 9"></polyline>
  </svg>
</button>

In some contexts, it can be helpful to add a counter to a button – e.g. follower count, vote count etc. Just separate the counter from the button text with a space.

<button class="Button primary" type="button">Follow 2k</button>

Here's an example with an icon, text and a counter.

<button class="Button primary" type="button">
  <div class="mr-1">
    <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="12" y1="5" x2="12" y2="19"></line>
      <line x1="5" y1="12" x2="19" y2="12"></line>
    </svg>
  </div>
  Follow 2k
</button>

Active state

Each of the four button styles share an active state, which can be applied by adding an is-active class. Example use cases might include signifying that a user is being followed, or that a friend request has been sent.

<button class="Button primary is-active">Unfollow</button>

Disabled state

If an action is usually possible but is currently disallowed for some reason, you can apply a disabled state using the is-disabled class. As shown below, different markup is required depending on the html tag.

<button class="Button is-disabled" disabled>...</button>
<a class="Button is-disabled" aria-disabled="true">...</a>
<input class="Button is-disabled" value="..." disabled>

Loading state

While in a waiting state, you could swap out the button text for a loading indicator, then swap it back in when the action is complete.

<button class="Button" type="button">
  <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" stroke="none">
    <circle cx="4" cy="12" r="2.16995">
        <animate attributeName="r" begin="0s" dur="1s" values="2;3;2" calcMode="linear" repeatCount="indefinite"></animate>
    </circle>
    <circle cx="12" cy="12" r="2.49005">
        <animate attributeName="r" begin="0.33s" dur="1s" values="2;3;2" calcMode="linear" repeatCount="indefinite"></animate>
    </circle>
    <circle cx="20" cy="12" r="2.84995">
        <animate attributeName="r" begin="0.66s" dur="1s" values="2;3;2" calcMode="linear" repeatCount="indefinite"></animate>
    </circle>
  </svg>
</button>

Button group

There are 3 modifier classes, left, middle and right, for grouping buttons in a row or for grouping buttons with other components. Wrap the buttons in a Flexbox component to place them inline. Semantic buttons should not be grouped. One common use case is pagination.

<div class="display-flex">
  <button class="Button left" type="button">...</button>
  <button class="Button middle" type="button">...</button>
  <button class="Button middle" type="button">...</button>
  <button class="Button right" type="button">...</button>
</div>