floating action buttons docs

Floating Action Buttons

A sticky list container for action buttons.
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 Install 
npm install @bolt/components-floating-action-buttons
Dependencies @bolt/core

Basic FAB

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 On Scroll Selector

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 Button

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.

X and Y Offsets

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.