Button

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

Normal buttons•
Link buttons•
Buttons and icons•
Disabled button•
Size variations•
Loading state•
Modifiers list

Normal buttons

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. This can work in combination with any other modifier in order to achieve the desired result. A good option if you need an "arrow-button" like component with a different icon.

    <button type="button" class="flix-btn flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Neutral</span>
    </button>
    <button type="button" class="flix-btn flix-btn--primary flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Primary</span>
    </button>
    <button type="button" class="flix-btn flix-btn--secondary flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid"></i>
      <span class="flix-btn__text">Secondary</span>
    </button>
    <button type="button" class="flix-btn flix-btn--tertiary flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid"></i>
      <span class="flix-btn__text">Tertiary</span>
    </button>
    <button type="button" class="flix-btn flix-btn--danger flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid"></i>
      <span class="flix-btn__text">Danger</span>
    </button>

    <button type="button" class="flix-btn flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Neutral</span>
    </button>
    <button type="button" class="flix-btn flix-btn--primary flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Primary</span>
    </button>
    <button type="button" class="flix-btn flix-btn--secondary flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid"></i>
      <span class="flix-btn__text">Secondary</span>
    </button>
    <button type="button" class="flix-btn flix-btn--tertiary flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid"></i>
      <span class="flix-btn__text">Tertiary</span>
    </button>
    <button type="button" class="flix-btn flix-btn--danger flix-btn--link flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid"></i>
      <span class="flix-btn__text">Danger</span>
    </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--has-icon modifier class should be added to the button;
flix-btn__icon mix class should be added to the flix-icon element;
to hide icon element from screen readers aria-hidden="true" needs to be applied to it;
button text should be wrapped in flix-btn__text element;

<button class="flix-btn flix-btn--has-icon flix-btn--secondary">
    <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
    <span class="flix-btn__text">Icon button</span>
</button>

<button class="flix-btn flix-btn--has-icon flix-btn--secondary">
    <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
    <span class="flix-btn__text">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--has-icon 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--has-icon 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--has-icon flix-btn--disabled flix-btn--square" disabled="">
      1
    </button>
    <button type="button" aria-label="Get info" class="flix-btn flix-btn--has-icon 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--has-icon 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--has-icon 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--has-icon flix-btn--disabled flix-btn--square" disabled="">
      1
    </button>
    <button type="button" aria-label="Get info" class="flix-btn flix-btn--has-icon 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 flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Neutral</span>
    </button>
    <button type="button" disabled="" class="flix-btn flix-btn--primary flix-btn--link flix-btn--disabled flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Primary</span>
    </button>
    <button type="button" disabled="" class="flix-btn flix-btn--secondary flix-btn--link flix-btn--disabled flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Secondary</span>
    </button>
    <button type="button" disabled="" class="flix-btn flix-btn--tertiary flix-btn--link flix-btn--disabled flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Tertiary</span>
    </button>
    <button type="button" disabled="" class="flix-btn flix-btn--danger flix-btn--link flix-btn--disabled flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Danger</span>
    </button>

    <button type="button" disabled="" class="flix-btn flix-btn--link flix-btn--disabled flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Neutral</span>
    </button>
    <button type="button" disabled="" class="flix-btn flix-btn--primary flix-btn--link flix-btn--disabled flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Primary</span>
    </button>
    <button type="button" disabled="" class="flix-btn flix-btn--secondary flix-btn--link flix-btn--disabled flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Secondary</span>
    </button>
    <button type="button" disabled="" class="flix-btn flix-btn--tertiary flix-btn--link flix-btn--disabled flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Tertiary</span>
    </button>
    <button type="button" disabled="" class="flix-btn flix-btn--danger flix-btn--link flix-btn--disabled flix-btn--has-icon">
      <i class="flix-btn__icon flix-icon flix-icon-settings-solid" aria-hidden="true"></i>
      <span class="flix-btn__text">Danger</span>
    </button>

Size variations

flix-btn--block block button, has 100% width, occupies the whole container;
flix-btn--square small square 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>

    <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--primary 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--primary 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--has-icon`	button with icon
`flix-btn--link`	button link
`flix-btn--block`	block button
`flix-btn--square`	square button