Floating Action Buttons

A sticky list container for action buttons.

Published Last updated: 5.5.0 Change log 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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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-v3.x