Bolt Design System

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

Floating Action Buttons

A sticky list container for action buttons.