Basic floating action buttons Floating action buttons (FAB) are a list of fixed positioned buttons placed on the right side of the screen. Important Notes: One or many action buttons can be used. The most common use case is a “back to top” button. Please note that the scroll to top button will not animate properly unless the demo is opened in a new page (outside the pattern-lab wrapper). When using a Button element as FAB, it is recommended to use an icon-only button with tooltip. Set placement of tooltip to left to avoid clashing with other buttons. Demo View full page demo
Twig
{# Assemble the button(s) as list item(s) #}
{% set scroll_to_top_button %}
  {% set trigger %}
    {% set icon_chevron_up %}
      {% include '@bolt-components-icon/icon.twig' with {
        name: 'chevron-up',
      } only %}
    {% endset %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Back to top',
      border_radius: 'full',
      icon_only: icon_chevron_up,
      attributes: {
        href: '#top',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-tooltip/tooltip.twig' with {
    content: 'Back to top',
    placement: 'left',
    trigger: trigger,
  } only %}
{% endset %}
{% set fab_list_items %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: scroll_to_top_button,
  } only %}
{% endset %}

{# Pass the list items into the list template #}
{% set fab_list %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with {
    content: fab_list_items,
  } only %}
{% endset %}

{# Pass the list into the main template #}
{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: fab_list,
} only %}
HTML
Not available in plain HTML. Please use Twig.