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>

Word wrapping

flix-btn--no-wrap
Prevents the text from wrapping to a new line on specific cases.

By default the button allows text wrapping inside, but in some specific cases you might want prevent that from happening. In these situations you can use the --no-wrap modifier.

Note: resize your window or set a smaller width on the example bellow to observe the effect of no-wrap.

<div class="flix-btn-group flix-btn-group--horizontal flix-btn-group--wrap">
  <button type="button" class="flix-btn">
    <flix-icon aria-hidden="true" class="flix-btn__icon " name="beer" size="4"></flix-icon>
    With long text that should wrap to the next line if it is too long and have multiple lines with an icon
  </button>
  <button type="button" class="flix-btn flix-btn--no-wrap">
    <flix-icon aria-hidden="true" class="flix-btn__icon " name="beer" size="4"></flix-icon>
    With long text that should NOT wrap to the next line if it is too long with an icon
  </button>
</div>

Related Components

Related Guides