Skip to main contentSkip to site searchSkip to component search
Honeycomb

Button

A button makes an action visible and also triggers this action through interaction.

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--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 flix-btn-group--wrap">
  <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--danger">Danger</button>
  <button type="button" class="flix-btn flix-btn--link">
    <flix-icon class="flix-btn__icon" name="arrow-left" size="4" aria-hidden="true"></flix-icon>
    Link
  </button>
</div>

Using icons

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

  • Add the flix-btn__icon extra class name to the element;
  • Use icons with size 4;
  • If the icon is just decorative, and the button has a meaningful text label, you can hide the icon from screen readers by adding aria-hidden="true" to it;
<button class="flix-btn flix-btn--secondary">
  <flix-icon class="flix-btn__icon" name="arrow-down" size="4" aria-hidden="true"></flix-icon>
  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--horizontal">
  <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, use it if the content of your button is a single icon.
flix-btn--stacked
Shows the icon and text stacked in column layout.

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 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 flix-btn-group--horizontal">
  <button type="button" aria-label="Settings" class="flix-btn flix-btn--square">
    <flix-icon class="flix-btn__icon" name="settings" solid="" size="4" aria-hidden="true"></flix-icon>
  </button>
  <button type="button" aria-label="Delete" class="flix-btn flix-btn--danger flix-btn--square">
    <flix-icon class="flix-btn__icon" name="delete" size="4" aria-hidden="true"></flix-icon>
  </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">
    <flix-icon class="flix-btn__icon" name="info" size="4" aria-hidden="true"></flix-icon>
  </button>
</div>

The stacked variation will show the icon and text stacked in a column rather than in line.

One common place where stacked buttons can be use is in the header bar.

<div class="flix-btn-group flix-btn-group--horizontal">
  <button type="button" class="flix-btn flix-btn--primary flix-btn--stacked">
    <flix-icon class="flix-btn__icon" name="download" size="4" aria-hidden="true"></flix-icon>
    Download
  </button>
  <button type="button" class="flix-btn flix-btn--secondary flix-btn--loading flix-btn--stacked">
    <flix-icon class="flix-btn__icon" name="time" size="4" aria-hidden="true"></flix-icon>
    Loading...
  </button>
  <button type="button" class="flix-btn flix-btn--link flix-btn--stacked">
    <flix-icon class="flix-btn__icon" name="question" size="4" aria-hidden="true"></flix-icon>
    Help
  </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 flix-btn-group--wrap flix-btn-group--horizontal">
  <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="">
    <flix-icon class="flix-btn__icon" name="settings" solid="" size="4" aria-hidden="true"></flix-icon>
  </button>
  <button type="button" class="flix-btn flix-btn--link flix-btn--disabled" disabled="">
    <flix-icon class="flix-btn__icon" name="settings" solid="" size="4" aria-hidden="true"></flix-icon>
    Settings
  </button>
  <button type="button" aria-label="Available Seats: 1" class="flix-btn flix-btn--secondary 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--wrap flix-btn-group--horizontal">
  <button type="button" aria-label="Delete" class="flix-btn flix-btn--square flix-btn--danger flix-btn--loading">
    <flix-icon class="flix-btn__icon" name="delete" solid="" size="4" aria-hidden="true"></flix-icon>
  </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
flix-btn-group--align-end
Aligns buttons at the desired position in the group.
flix-btn-group--half-gap
flix-btn-group--1-gap
Sets the gap between buttons to the desired spacing value.
flix-btn-group--wrap
Allows buttons inside the group to wrap to the next line if there is not enough horizontal space. 
<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 aria-label="More export options" type="button" class="flix-btn flix-btn--secondary flix-btn--square" data-dropdown="export-options">
      <flix-icon class="flix-btn__icon" name="arrow-down" size="4" aria-hidden="true"></flix-icon>
    </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>