Button

On the examples bellow we sometimes use button groups to organize our buttons. A button alone usually does not require a button group around it.

Please note that although you can use flix-btn classes with any html elements we highly advise using the native HTML button element as much as possible to keep the right semantics and follow the best accessibility practices.

Buttons have 5 appearance variations covering different use cases for strong or weak CTAs.

Every variation has its own CSS modifier class:

flix-btn--primary

Primary button, use for the main action on a page.

flix-btn--secondary

Secondary button is the second most important action on a page.

flix-btn--tertiary

Tertiary button, use it for sensitive actions.

flix-btn--danger

Danger button, use it for destructive actions such as "delete".

flix-btn--link

A more subtle button that doesn't stand out a lot.

<div class="flix-btn-group">
  <button type="button" class="flix-btn">Neutral</button>
  <button type="button" class="flix-btn flix-btn--primary">Primary</button>
  <button type="button" class="flix-btn flix-btn--secondary">Secondary</button>
  <button type="button" class="flix-btn flix-btn--tertiary">Tertiary</button>
  <button type="button" class="flix-btn flix-btn--danger">Danger</button>
</div>

Link button

The "link" variation is a more subtle version, a good option for "arrow buttons".

Please note that secondary, primary, tertiary or danger variation modifiers won't affect link button colors.

<button type="button" class="flix-btn flix-btn--link">
  <i class="flix-btn__icon flix-icon flix-icon-arrow-down" aria-hidden="true"></i>
  Services
</button>

With icons

When using icons inside of the button, pay attention to the following:

• Add the flix-btn__icon extra class name to the element;
• Usually icons look nicer with the flix-icon--fill-canvas modifier, to remove extra side spacing;
• If the icon is just decorative, and the button has a meaningful text based label, you can hide the icon from screen readers by adding aria-hidden="true" to it;

<button class="flix-btn flix-btn--secondary">
  <i class="flix-btn__icon flix-icon flix-icon--fill-canvas flix-icon-settings-solid" aria-hidden="true"></i>
  Settings
</button>

Size options

By default buttons are responsive, meaning they become bigger to increase the interactive space around them.

The following options override the responsiveness in order to set a fixed size for the buttons.

flix-btn--sm

Small button with a fixed size.

flix-btn--md

Medium button with a fixed size and no responsive behavior.

flix-btn--lg

Large button with a fixed size.

<div class="flix-btn-group flix-btn-group--align-center">
  <button type="button" class="flix-btn flix-btn--primary flix-btn--lg">Large</button>
  <button type="button" class="flix-btn flix-btn--primary flix-btn--md">Medium</button>
  <button type="button" class="flix-btn flix-btn--primary flix-btn--sm">Small</button>
</div>

Display options

Sizing variations can be combined with the following display options like "square" and "block" buttons:

flix-btn--block

Makes the button fill the available horizontal space.

flix-btn--square

Makes the button a perfect square, good for "icon only" buttons.

The block button will fill the available horizontal space, and is commonly seen on panel footers or as the main CTA on a narrow column:

<button type="button" class="flix-btn flix-btn--block">Neutral block</button>

"Icon only" buttons are commonly used as triggers for tooltips and dropdowns.

When using "icon only" you should use the "square" button. In this case, since there is no accessible text to serve as a label for the button you should make sure to provide an accessible label using aria-label:

<div class="flix-btn-group">
  <button type="button" aria-label="Settings" class="flix-btn flix-btn--square">
    <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
  </button>
  <button type="button" aria-label="Delete" class="flix-btn flix-btn--danger flix-btn--square">
    <i class="flix-btn__icon flix-icon flix-icon-delete" aria-hidden="true"></i>
  </button>
  <button type="button" aria-label="Available Seats: 1" class="flix-btn flix-btn--secondary flix-btn--square">
    1
  </button>
  <button type="button" aria-label="More information" class="flix-btn flix-btn--link flix-btn--square">
    <i class="flix-btn__icon flix-icon flix-icon-info" aria-hidden="true"></i>
  </button>
</div>

Disabled button

flix-btn--disabled

This modifier can be added to any button and should be paired with the `disabled` or `aria-disabled="true"` attributes, depending on your requirements.

You can read more in this article about Making Disabled Buttons More Inclusive.

<div class="flix-btn-group">
  <button type="button" class="flix-btn flix-btn--disabled" disabled="">
    Disabled
  </button>
  <button type="button" aria-label="Settings" class="flix-btn flix-btn--primary flix-btn--square flix-btn--disabled" disabled="">
    <i class="flix-btn__icon flix-icon flix-icon--fill-canvas flix-icon-settings-solid" aria-hidden="true"></i>
  </button>
  <button type="button" class="flix-btn flix-btn--link flix-btn--disabled" disabled="">
    <i class="flix-btn__icon flix-icon flix-icon--fill-canvas flix-icon-settings-solid" aria-hidden="true"></i>
    Settings
  </button>
  <button type="button" aria-label="Available Seats: 1" class="flix-btn flix-btn--tertiary flix-btn--square flix-btn--disabled" disabled="">
    1
  </button>
  <button type="button" class="flix-btn flix-btn--danger flix-btn--disabled" disabled="">
    Delete
  </button>
</div>

Loading state

flix-btn--loading

Loading state to be used when form data processing needs to be indicated to the user.

The loading spinner will replace any available icon.

<div class="flix-btn-group flix-btn-group--vertical">
  <button type="button" aria-label="Delete" class="flix-btn flix-btn--square flix-btn--danger flix-btn--loading">
    <i class="flix-btn__icon flix-icon flix-icon--fill-canvas flix-icon-delete-solid" aria-hidden="true"></i>
  </button>
  <button type="button" class="flix-btn flix-btn--link flix-btn--loading">Loading...</button>
  <button type="button" class="flix-btn flix-btn--secondary flix-btn--loading">Loading...</button>
</div>

Button group

On the examples above we used button groups (flix-btn-group) to organize our buttons.

The button group adds spacing between the buttons and lets you control how buttons interact with each other. A button alone usually does not require a button group around it.

The default behavior of a button group is:

• Items aligned at the start of the group;
• A gap of spacing-2 between each button;
• Responsive behavior shows buttons on a column on mobile and on a row on desktop screens;

The following modifiers allow you to customize it:

flix-btn-group--horizontal

Overrides responsive behavior and shows buttons always side by side. Block buttons will fill available space equally.

flix-btn-group--vertical

Overrides responsive behavior and shows buttons always in a column.

flix-btn-group--align-center

Centralizes the buttons within the group.

flix-btn-group--align-end

Aligns buttons at the end of the group.

flix-btn-group--half-gap

Sets the gap between buttons to half spacing.

flix-btn-group--1-gap

Sets the gap between buttons to 1 spacing.

<div class="flix-btn-group flix-btn-group--horizontal flix-btn-group--align-end flix-btn-group--half-gap">
  <button type="button" class="flix-btn flix-btn--secondary">
    Export as Excel
  </button>
  <div class="flix-dropdown">
    <button type="button" class="flix-btn flix-btn--secondary flix-btn--square" data-dropdown="export-options">
      <i class="flix-btn__icon flix-icon flix-icon--fill-canvas flix-icon-arrow-down" aria-hidden="true"></i>
    </button>
    <ul id="export-options" class="flix-dropdown__items" hidden="">
      <li class="flix-dropdown-item">
        <a class="flix-dropdown-item__link" href="#">Export as PDF</a>
      </li>
      <li class="flix-dropdown-item">
        <a class="flix-dropdown-item__link" href="#">Export as PNG</a>
      </li>
      <li class="flix-dropdown-item">
        <a class="flix-dropdown-item__link" href="#">Export as JPG</a>
      </li>
    </ul>
  </div>
</div>