Button

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

Link buttons•
Buttons and icons•
Disabled button•
Sizes and dimensions•
Loading state•
Modifiers list

Buttons have 5 appearance variations covering different use cases for strong or weak CTAs. Every variation has its own CSS modifier class:

CSS class	Description
No modifier, default	Neutral button
`flix-btn--primary`	Primary button
`flix-btn--secondary`	Secondary button
`flix-btn--tertiary`	Tertiary button
`flix-btn--danger`	Danger button

<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>

<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>

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.

Pay attention that multiple button siblings in one container preserve side spacing, this means you don't need additional styles or elements when creating a simple Yes/No button groups.

Link buttons

flix-btn--link modifier triggers a more subtle button "link" variation. A good option if you need an "arrow-button" like component with a different icon. 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-settings-solid" aria-hidden="true"></i>
  Neutral
</button>

<button type="button" class="flix-btn flix-btn--link">
  <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
  Neutral
</button>

Buttons and icons

It's possible to put an icon element inside the button, however 4 simple modifications are required in order for it to work nicely:

flix-btn__icon mix class should be added to the flix-icon element;
depending on your needs in terms of spacing you can optionally use flix-icon--fill-canvas modifier for icons to remove side spacing;
to hide icon element from screen readers aria-hidden="true" needs to be applied to it;
the span.flix-btn__text element is no longer required but keeping it has no effect;

<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>
  Icon button
</button>
<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>
  <span class="flix-btn__text">Deprecated icon button</span>
</button>

<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>
  Icon button
</button>
<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>
  <span class="flix-btn__text">Deprecated icon button</span>
</button>

When using icon-only buttons, make sure to provide a textual description for assistive technologies on aria-label.

<button type="button" aria-label="Settings" class="flix-btn flix-btn--tertiary 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--disabled flix-btn--square" disabled="">
  1
</button>
<button type="button" aria-label="Get info" class="flix-btn flix-btn--square flix-btn--link">
  <i class="flix-btn__icon flix-icon flix-icon-info" aria-hidden="true"></i>
</button>

<button type="button" aria-label="Settings" class="flix-btn flix-btn--tertiary 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--disabled flix-btn--square" disabled="">
  1
</button>
<button type="button" aria-label="Get info" class="flix-btn flix-btn--square flix-btn--link">
  <i class="flix-btn__icon flix-icon flix-icon-info" aria-hidden="true"></i>
</button>

Disabled button

flix-btn--disabled modifier can be added to any button in order to indicate a blocked action, pair it with the disabled attribute to fully block interaction.

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

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

<button type="button" disabled="" class="flix-btn flix-btn--link flix-btn--disabled">
  <i class="flix-btn__icon flix-icon flix-icon--fill-canvas flix-icon-settings-solid" aria-hidden="true"></i>
  Neutral
</button>

<button type="button" disabled="" class="flix-btn flix-btn--link flix-btn--disabled">
  <i class="flix-btn__icon flix-icon flix-icon--fill-canvas flix-icon-settings-solid" aria-hidden="true"></i>
  Neutral
</button>

Sizes and dimensions

Following sizing options are available for buttons:

CSS class	Description
No modifier, default	Medium button with responsive height/width change
`flix-btn--sm`	Small button with a fixed size
`flix-btn--md`	Medium button with a fixed size and no responsive changes
`flix-btn--lg`	Large button with a fixed size

Please note that if a size variation is applied the button no longer responds to screen size as default buttons do.

<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>

<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>

Sizing variations can be combined with "dimension" option like "square" and "block" buttons:

flix-btn--block block button, has 100% width, occupies the whole container;
flix-btn--square square button, has equal width and height;

<button type="button" class="flix-btn flix-btn--block">Neutral block</button>
<br/>
<button type="button" class="flix-btn flix-btn--square" aria-label="Settings"><i class="flix-btn__icon flix-icon flix-icon-settings-solid"></i></button>

<button type="button" class="flix-btn flix-btn--block">Neutral block</button>
<br/>
<button type="button" class="flix-btn flix-btn--square" aria-label="Settings"><i class="flix-btn__icon flix-icon flix-icon-settings-solid"></i></button>

Loading state

All button types have "loading" state that can be triggered with a flix-btn--loading modifier. Use it when form data processing needs to be indicated to the user.

<button type="button" class="flix-btn flix-btn--secondary flix-btn--loading">Loading...</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>
<button type="button" class="flix-btn flix-btn--link flix-btn--loading">Loading...</button>

Modifiers list

Selector	Description
`flix-btn--primary`	primary button
`flix-btn--secondary`	secondary button
`flix-btn--tertiary`	tertiary button
`flix-btn--danger`	danger button
`flix-btn--disabled`	disabled button
`flix-btn--loading`	loading button
`flix-btn--link`	button link
`flix-btn--block`	block button
`flix-btn--square`	square button