Buttons

How we align buttons inside of our product

    General rules

    Here are some general rules to keep in mind.

    • Make actions as specific as possible: "Save trigger" is better than "Save".
    • Blue is our primary action button. Some pages have multiple sections with primary actions for each of them, which means we can have multiple primary actions on a single page.
    • For actions, use buttons; for navigation, use links.

    Left aligned (default)

    Use left-aligned buttons for left-aligned content.

    • Most of our forms
    • Vertical stacks of information with one action

    This alignment ensures that the user's eye is guided vertically down, and ends up at the primary action.

    Note that we can add a tertiary action button to the right.

    Box heading

    Some type of content or a form.

    In cases of linking to a page, use a simple c-link.

    Box heading

    Some type of content or a form.
    Help me

    Even when the primary actions are destructive, we can use the same pattern.

    Box heading

    Some type of content or a form.
    Help me
    <div class="c-box mb-0">
  <h2 class="c-box__header">Box heading</h2>
  <div class="p-5">
    Some type of content or a form.
  </div>
  <div class="c-box__footer flex items-center gap-2">
    <button class="c-button c-button--sm c-button--red">Delete</button>
    <button class="c-button c-button--sm c-button--white">Cancel</button>
    <a href="#" class="c-link ml-auto">Help me</a>
  </div>
</div>
    Show more

    Center-aligned for flows

    Our product contains (set-up) flows in which you'll progress forwards and can move backwards as well. In these situations, it feels quite weird to have the primary button left-aligned.

    In these situation, the direction of the form dictates the position of the buttons. Forwards is right-aligned, and back is left-aligned.

    A tertiary link can be added below the text.

    Here is some type of flow

    Integer rutrum tempus est, in commodo turpis tempus eu. Integer id urna malesuada, dignissim ligula in, malesuada massa. Nulla imperdiet gravida lectus quis congue. Curabitur mattis sapien in purus convallis egestas.

    Help me set this up
    <div class="c-box p-10 flex flex-col items-center gap-4 mb-0 text-center">
  <h2 class="c-heading--2xl mb-0">
    Here is some type of flow
  </h2>
  <p class="max-w-sm text-gray-700">Integer rutrum tempus est, in commodo turpis tempus eu. Integer id urna malesuada, dignissim ligula in, malesuada massa. Nulla imperdiet gravida lectus quis congue. Curabitur mattis sapien in purus convallis egestas.</p>
  <div class="flex justify-center items-center gap-2">
    <button class="c-button c-button--sm c-button--white">Back button</button>
    <button class="c-button c-button--sm">Forward button</button>
  </div>
  <a href="#" class="c-link">Help me set this up</a>
</div>
    Show more

    Right-aligned on data rows

    When we have a row of data with relevant actions, we can use right-aligned buttons. In this case, the most impactful action goes on the right.

    A row with some data
    <div class="c-box p-5 flex gap-2 items-center mb-0">
  <span class="flex-1">A row with some data</span>
  <button class="c-button c-button--sm c-button--white">Edit</button>
  <button class="c-button c-button--sm c-button--white">Copy</button>
  <button class="c-button c-button--sm c-button--red">Delete</button>
</div>