Floating Action Buttons

A sticky list container for action buttons.

Published

Last updated: 5.8.0

Github

NPM

Twig Usage

{# 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 %}

Schema

Floating Action Buttons (floating-action-buttons.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Renders a list of buttons. Use the floating-action-buttons-ul.twig template to render a list.	`any`	—	—

Floating Action Buttons UL (floating-action-buttons-ul.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Renders a list of buttons. Use the floating-action-buttons-li.twig template to render each list item.	`any`	—	—

Floating Action Buttons LI (floating-action-buttons-li.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content	Renders a button (icon-only button with tooltip is recommended). Use the Button element or the floating-action-buttons-toggle-button.twig template.	`any`	—	—
children	Renders a list of secondary buttons. Use the floating-action-buttons-ul.twig template to render a list. Only use this prop if the floating-action-buttons-toggle-button.twig template is used for the content prop.	`any`	—	—
show_on_scroll_selector	Select an element (usually a page title) which when scrolled offscreen will show/hide the list-item. Must be a valid CSS selector.	`string`	—	—

Floating Action Buttons Toggle Button (floating-action-buttons-toggle-button.twig)

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
content *	Content of the button.	`any`	—	—
hierarchy	Style the button appropriately based on information hierarchy.	`string`	`primary`	`primary`, `secondary`, `tertiary`, `transparent`
size	Control the font-size and padding of the button.	`string`	`medium`	`xsmall`, `small`, `medium`, `large`
border_radius	Control the border radius of the button.	`string`	`small`	`small`, `large`, `full`

Install

npm install @bolt/components-floating-action-buttons

Dependencies

@bolt/core-v3.x

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.

Show FAB on scroll

Each individual floating action button can be shown based on what element on the page has been scrolled past.

Important Notes:

The show_on_scroll_selector prop accepts CSS selector names (eg. #main-title, .book-name, etc.).

The selector indicates the element that must be scrolled past to reveal a floating action button.

To avoid animation jump, please only use this on the first item in a FAB (top of the list).

Demo

View full page demo

Twig

{% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
  content: content,
  show_on_scroll_selector: '#main-title'
} only %}

HTML

Not available in plain HTML. Please use Twig.

Toggle on/off more buttons

A toggle button can toggle on/off a secondary list of action buttons. This specific button comes with the FAB component.

Important Notes:

The floating-action-buttons-toggle-button.twig template renders the toggle button.

The toogle button is recommended if there is a total of more than 3 action buttons.

Reference the schema for all options.

Demo

View full page demo

Twig

{# Set up the toggle button #}
{% set more_button %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-toggle-button.twig' with {
    content: 'More actions',
    border_radius: 'full',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}

{# Set up the children list the button is going to toggle #}
{% set more_actions_list_items %}
  {% set placeholder_button %}
    {% set icon_link %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'external-link',
      } only %}
    {% endset %}
    {% include '@bolt-components-tooltip/tooltip.twig' with {
      content: 'Go to Google',
      placement: 'left',
      trigger: include('@bolt-elements-button/button.twig', {
        content: 'Go to Google',
        size: 'small',
        border_radius: 'full',
        icon_only: icon_link,
        hierarchy: 'secondary',
        attributes: {
          href: 'https://www.google.com',
          rel: 'noopener',
          target: '_blank'
        },
      }),
    } only %}
  {% endset %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: placeholder_button,
  } only %}
{% endset %}
{% set more_actions_list %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with {
    content: more_actions_list_items,
  } only %}
{% endset %}

{# Assemble the toggle button and the children list #}
{% set fab_list_items %}
  {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
    content: more_button,
    children: more_actions_list
  } 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.

Customize FAB placement with X and Y offsets

There are 2 CSS custom properties available for use to further customize the placement of floating action buttons.

Important Notes:

--c-bolt-floating-action-buttons-offset-x: the distance between the FAB and the right side of the screen.

--c-bolt-floating-action-buttons-offset-y: the distance between the FAB and the bottom of the screen.

The value can use any CSS unit (px, rem, em, vw, vh, etc.).

Demo

View full page demo

Twig

{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with {
  content: _content,
  attributes: {
    style: '--c-bolt-floating-action-buttons-offset-x: 5vw; --c-bolt-floating-action-buttons-offset-y: 5vh;'
  }
} only %}

HTML

Not available in plain HTML. Please use Twig.