Fab

The Fab component provides a reusable pattern for fab in the interface.

FAB

Note: We've removed the placement of the buttons to prevent issues with documentation. Remove the values from the classList to get the intended layout.

Vestibulum id ligula porta felis euismod semper

<div class="c-fab c-fab__bottom-right" data-uid="69f0d09cd2983" data-component="fab">
    <div data-js-toggle-item="panel-id-69f0d09cd297a" data-js-toggle-class="c-fab__panel--open" class="c-fab__panel">

                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-fab__heading c-typography__variant--h6" data-uid="69f0d09cd29e8" data-component="typography">
    Vestibulum id ligula porta felis euismod semper
</p>        
        <!-- nav.blade.php -->
 
          <ul class="c-nav c-nav--tiles c-nav--depth-1 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d09cd1b77" data-uid="69f0d09cd1b77" data-component="nav">
          <li id="69f0d09cd1b77-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched" role="menuitem" data-depth="1" aria-label="Arbete">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd1b77-1-0__label" data-uid="69f0d09cd1e27" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete
    </span>
    </a>
          
          
                  </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d09cd22d7" data-component="element">
        <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d09cd1e8e" data-uid="69f0d09cd1e8e" data-component="nav">
          <li id="69f0d09cd1e8e-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2 has-fetched" role="menuitem" data-depth="2" aria-label="Arbete - Child 1 with a long name">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd1e8e-1-0__label" data-uid="69f0d09cd1f79" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 1 with a long name
    </span>
    </a>
          
          
                  </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d09cd21e8" data-component="element">
        <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-3 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d09cd1fca" data-uid="69f0d09cd1fca" data-component="nav">
          <li id="69f0d09cd1fca-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 1">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd1fca-1-0__label" data-uid="69f0d09cd209a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 1
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d09cd1fca-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-3" role="menuitem" data-depth="3" aria-label="Arbete - Granchild 2">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd1fca-1-1__label" data-uid="69f0d09cd2160" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Granchild 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d09cd1e8e-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Arbete - Child 2">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd1e8e-1-1__label" data-uid="69f0d09cd2296" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Arbete - Child 2
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d09cd1b77-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd1b77-1-1__label" data-uid="69f0d09cd237a" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Bo, bygga och miljö
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d09cd1b77-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd1b77-1-2__label" data-uid="69f0d09cd2431" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Förskola och utbildning
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d09cd1b77-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1 has-fetched" role="menuitem" data-depth="1" aria-label="Kommun och politik">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd1b77-1-3__label" data-uid="69f0d09cd24e2" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Kommun och politik
    </span>
    </a>
          
          
                  </div>

        
          <!-- nav.blade.php -->
 
              <div class="c-element c-nav__child-container" data-uid="69f0d09cd281e" data-component="element">
        <ul class="c-nav c-nav--child c-nav--height-sm c-nav--depth-2 unlist c-nav--vertical" aria-orientation="vertical" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_69f0d09cd253e" data-uid="69f0d09cd253e" data-component="nav">
          <li id="69f0d09cd253e-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="About">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd253e-1-0__label" data-uid="69f0d09cd260b" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      About
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d09cd253e-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Contact">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd253e-1-1__label" data-uid="69f0d09cd26a9" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Contact
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d09cd253e-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="Links">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd253e-1-2__label" data-uid="69f0d09cd2745" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      Links
    </span>
    </a>
          
          
                  </div>

        
                          </li>

          <li id="69f0d09cd253e-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-2" role="menuitem" data-depth="2" aria-label="More info">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-link c-nav__link" href="#" target="_top" id="id_69f0d09cd253e-1-3__label" data-uid="69f0d09cd27e0" data-component="link">
        <!-- icon.blade.php -->
        <span 
      class="c-nav__text" 
      style="">
      More info
    </span>
    </a>
          
          
                  </div>

        
                          </li>

    </ul>
    </div>
                    </li>

          <li id="69f0d09cd1b77-1-4__item" class="c-nav__item c-nav__item--button c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
        
        <div class="c-nav__item-wrapper">
          
                      <a class="c-button c-nav__button c-button__filled c-button__filled--primary c-button--md" aria-label="Omsorg och stöd" href="#" target="_top" id="id_69f0d09cd1b77-1-4__label" data-uid="69f0d09cd28d2" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Omsorg och stöd
            </span>
        
    </span> </a>          
          
                  </div>

        
                          </li>

    </ul>

    </div>

                <button class="c-button c-button__filled c-button__filled--primary c-button--md" data-js-toggle-trigger="panel-id-69f0d09cd297a" type="button" aria-label="Open menu" data-uid="69f0d09cd2a33" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09cd2a78" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Open menu
            </span>
        
    </span> </button>    </div>

@fab([
    'position' => 'bottom-right',
    'heading' => "Vestibulum id ligula porta felis euismod semper",
    'button' => [
        'icon' => 'apps',
        'size' => 'md',
        'color' => 'primary',
        'text' => 'Open menu',
        'reversePositions' => true,
    ],
    'classList' => []
])

    @nav([
        'items' => \MunicipioStyleGuide\Navigation::getMockedMultilevel(),
        'direction' => 'vertical',
        'includeToggle' => false,
        'classList' => ['c-nav--tiles']
    ])
    @endnav

@endfab

Multi FAB

Multiple FABs can be used together, but they should be used with caution to avoid overwhelming the user. When using multiple FABs, it's important to ensure that each button has a clear and distinct purpose, and that they are visually differentiated from each other. Additionally, it's important to consider the placement of the buttons to ensure that they are easily accessible and do not interfere with other elements on the screen.

Vestibulum id ligula porta felis euismod semper

Hello! I'm home!

Vestibulum id ligula porta felis euismod semper

Hello I'am a FAB!

<div class="c-fab c-fab__bottom-right" data-uid="69f0d09cd2ede" data-component="fab">
    <div data-js-toggle-item="panel-id-69f0d09cd2ed2" data-js-toggle-class="c-fab__panel--open" class="c-fab__panel">

                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-fab__heading c-typography__variant--h6" data-uid="69f0d09cd2f23" data-component="typography">
    Vestibulum id ligula porta felis euismod semper
</p>        
        Hello! I'm home!

    </div>

                <button class="c-button c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-toggle-trigger="panel-id-69f0d09cd2ed2" aria-label="home" type="button" data-uid="69f0d09cd2f6f" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--home c-icon--material c-icon--material-home material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="home" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09cd2fb5" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>    </div>
    <div class="c-fab c-fab__bottom-right" data-uid="69f0d09cd3001" data-component="fab">
    <div data-js-toggle-item="panel-id-69f0d09cd2ffb" data-js-toggle-class="c-fab__panel--open" class="c-fab__panel">

                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-fab__heading c-typography__variant--h6" data-uid="69f0d09cd3035" data-component="typography">
    Vestibulum id ligula porta felis euismod semper
</p>        
        Hello I'am a FAB!

    </div>

                <button class="c-button c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-toggle-trigger="panel-id-69f0d09cd2ffb" aria-label="apps" type="button" data-uid="69f0d09cd3073" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09cd30b0" data-component="icon">
                    </span>
            </span>
        
        
    </span> </button>    </div>

@fab([
    'position' => 'bottom-right',
    'heading' => "Vestibulum id ligula porta felis euismod semper",
    'button' => [
        'icon' => 'home',
        'size' => 'md',
        'color' => 'primary',
        'text' => '',
        'reversePositions' => true,
    ],
    'classList' => []
])

    Hello! I'm home!
@endfab

@fab([
    'position' => 'bottom-right',
    'heading' => "Vestibulum id ligula porta felis euismod semper",
    'button' => [
        'icon' => 'apps',
        'size' => 'md',
        'color' => 'primary',
        'text' => '',
    ],
    'classList' => []
])
Hello I'am a FAB!
@endfab

FAB width small

Demonstrates the c-fab--width-sm modifier, which decreases the panel width by reducing the size multiplier.

Small width modifier

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<div class="c-fab c-fab--width-sm c-fab__bottom-right" data-uid="69f0d09cd3471" data-component="fab">
    <div data-js-toggle-item="panel-id-69f0d09cd3466" data-js-toggle-class="c-fab__panel--open" class="c-fab__panel">

                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-fab__heading c-typography__variant--h6" data-uid="69f0d09cd34b3" data-component="typography">
    Small width modifier
</p>        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

    </div>

                <button class="c-button c-button__filled c-button__filled--primary c-button--md" data-js-toggle-trigger="panel-id-69f0d09cd3466" type="button" aria-label="Open menu" data-uid="69f0d09cd3502" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09cd3546" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Open menu
            </span>
        
    </span> </button>    </div>

@fab([
    'position' => 'bottom-right',
    'heading' => 'Small width modifier',
    'button' => [
        'icon' => 'apps',
        'size' => 'md',
        'color' => 'primary',
        'text' => 'Open menu',
        'reversePositions' => true,
    ],
    'classList' => ['c-fab--width-sm']
])
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
@endfab

FAB width large

Demonstrates the c-fab--width-lg modifier, which increases the panel width by increasing the size multiplier.

Large width modifier

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<div class="c-fab c-fab--width-lg c-fab__bottom-right" data-uid="69f0d09cd3867" data-component="fab">
    <div data-js-toggle-item="panel-id-69f0d09cd3859" data-js-toggle-class="c-fab__panel--open" class="c-fab__panel">

                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-fab__heading c-typography__variant--h6" data-uid="69f0d09cd38b4" data-component="typography">
    Large width modifier
</p>        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

    </div>

                <button class="c-button c-button__filled c-button__filled--primary c-button--md" data-js-toggle-trigger="panel-id-69f0d09cd3859" type="button" aria-label="Open menu" data-uid="69f0d09cd38ff" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09cd3946" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Open menu
            </span>
        
    </span> </button>    </div>

@fab([
    'position' => 'bottom-right',
    'heading' => 'Large width modifier',
    'button' => [
        'icon' => 'apps',
        'size' => 'md',
        'color' => 'primary',
        'text' => 'Open menu',
        'reversePositions' => true,
    ],
    'classList' => ['c-fab--width-lg']
])
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
@endfab

FAB width x-large

Demonstrates the c-fab--width-xl modifier, which significantly increases the panel width by increasing the size multiplier.

x-Large width modifier

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

<div class="c-fab c-fab--width-xl c-fab__bottom-right" data-uid="69f0d09cd3c4f" data-component="fab">
    <div data-js-toggle-item="panel-id-69f0d09cd3c44" data-js-toggle-class="c-fab__panel--open" class="c-fab__panel">

                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-fab__heading c-typography__variant--h6" data-uid="69f0d09cd3ca4" data-component="typography">
    x-Large width modifier
</p>        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

    </div>

                <button class="c-button c-button__filled c-button__filled--primary c-button--md" data-js-toggle-trigger="panel-id-69f0d09cd3c44" type="button" aria-label="Open menu" data-uid="69f0d09cd3cef" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09cd3d35" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Open menu
            </span>
        
    </span> </button>    </div>

@fab([
    'position' => 'bottom-right',
    'heading' => 'x-Large width modifier',
    'button' => [
        'icon' => 'apps',
        'size' => 'md',
        'color' => 'primary',
        'text' => 'Open menu',
        'reversePositions' => true,
    ],
    'classList' => ['c-fab--width-xl']
])
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
@endfab

FAB with overflowing content

Demonstrates long panel content that exceeds the viewport height, so the panel scrolls within its max-height.

Long content overflow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit.

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur.

Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<div class="c-fab c-fab__bottom-right" data-uid="69f0d09cd40aa" data-component="fab">
    <div data-js-toggle-item="panel-id-69f0d09cd409c" data-js-toggle-class="c-fab__panel--open" class="c-fab__panel">

                        <!-- typography.blade.php   original: p -->
<p class="c-typography c-fab__heading c-typography__variant--h6" data-uid="69f0d09cd40ef" data-component="typography">
    Long content overflow
</p>        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
    <p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit.</p>
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod.</p>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.</p>
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
    <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>

    </div>

                <button class="c-button c-button__filled c-button__filled--primary c-button--md" data-js-toggle-trigger="panel-id-69f0d09cd409c" type="button" aria-label="Open menu" data-uid="69f0d09cd413a" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
        
                    <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--apps c-icon--material c-icon--material-apps material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="apps" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0d09cd4181" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Open menu
            </span>
        
    </span> </button>    </div>

@fab([
    'position' => 'bottom-right',
    'heading' => 'Long content overflow',
    'button' => [
        'icon' => 'apps',
        'size' => 'md',
        'color' => 'primary',
        'text' => 'Open menu',
        'reversePositions' => true,
    ],
    'classList' => []
])
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
    <p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit.</p>
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
    <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod.</p>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.</p>
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur.</p>
    <p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
    <p>Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
@endfab

API

Parameter	Default	Description
position	bottom-right	Where on the screen the FAB should be positioned
heading	false	Heading text for panel
button	false	Settings for the button element (trigger)
slot		Contents of popup panel
closeLabel	false	The label to indicate closing action
closeIcon	false	The icon to indicate closing action

CSS API

Variable	Default	Type	Values	Description
--c-fab--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-fab--border-radius	var(--border-radius)	range	-	Border Radius
--c-fab--color--surface	var(--color--surface)	color	-	Surface
--c-fab--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-fab--border-width	var(--border-width)	range	-	Size
--c-fab--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-fab--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-fab--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-fab--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-fab--font-size-400	var(--font-size-400)	range	-	Three steps above base in the type scale. Equivalent to h4.

Similar components

Tabs Table