Icons

Icon helpers allow you to add specific icons to various components.

Arrow down toggle

The arrow down toggle can be used with the flix-arrow-down-toggle class name.

If the element or direct parent element has the aria-expanded attribute, this helper will make it render an arrow down icon on the ::after pseudo-element. The arrow is rotated up when the expandable element attribute value is aria-expanded="true".

<div class="flix-btn-group">
  <button type="button" class="flix-btn flix-arrow-down-toggle" aria-expanded="false">Toggle not expanded</button>
  <button type="button" class="flix-btn flix-arrow-down-toggle" aria-expanded="true">Toggle expanded</button>
</div>

You can also import honeycomb tools and include the sass mixin on your custom class:

@use '@flixbus/honeycomb/assets/scss/honeycomb-tools' as hcTools;

.my-custom-toggle-button {
  @include hcTools.arrow-down-toggle;
}

Arrow up toggle

The arrow up toggle can be used with the flix-arrow-up-toggle class name.

Works identically as the arrow down toggle, but in reverse. Can be used with dropdowns that show on top.

<div class="flix-btn-group">
  <button type="button" class="flix-btn flix-arrow-up-toggle" aria-expanded="false">Toggle not expanded</button>
  <button type="button" class="flix-btn flix-arrow-up-toggle" aria-expanded="true">Toggle expanded</button>
</div>

And it also comes with a sass mixin:

@use '@flixbus/honeycomb/assets/scss/honeycomb-tools' as hcTools;

.my-custom-toggle-button {
  @include hcTools.arrow-up-toggle;
}