> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/14.floatingactionbtn.md).

# Floating Action Button

### Fab Props <a href="#fab-props" id="fab-props"></a>

| Name                    | Type                | Default                                                                     | Description                                         |
| ----------------------- | ------------------- | --------------------------------------------------------------------------- | --------------------------------------------------- |
| colors                  | object              |                                                                             | Object with Tailwind CSS colors classes             |
| colors.activeBgIos      | string              | 'active:bg-ios-primary-shade'                                               |                                                     |
| colors.activeBgMaterial | string              | ''                                                                          |                                                     |
| colors.bgIos            | string              | 'bg-primary'                                                                |                                                     |
| colors.bgMaterial       | string              | 'bg-md-light-primary-container dark:bg-md-dark-primary-container'           |                                                     |
| colors.textIos          | string              | 'text-white'                                                                |                                                     |
| colors.textMaterial     | string              | 'text-md-light-on-primary-container dark:text-md-dark-on-primary-container' |                                                     |
| colors.touchRipple      | string              | 'touch-ripple-primary dark:touch-ripple-white'                              |                                                     |
| component               | string              | 'a'                                                                         | Component's HTML Element                            |
| href                    | string              |                                                                             | Fab's link `href` attribute                         |
| text                    | string              |                                                                             | Button text (content)                               |
| textPosition            | 'after' \| 'before' | 'after'                                                                     | Text position, can be `after` icon or `before` icon |
| touchRipple             | boolean             | true                                                                        | Enables touch ripple effect in Material theme       |

### Fab Slots

| Name | Description           |
| ---- | --------------------- |
| icon | Fab's icon            |
| text | Button text (content) |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="FAB" />

    <!-- Right Top -->
    <i-fab
      class="fixed right-4-safe ios:top-15-safe material:top-18-safe z-20 k-color-brand-red"
    >
      <template #icon>
        <component :is="PlusIcon" />
      </template>
    </i-fab>

    <!-- Right Bottom -->
    <i-fab class="fixed right-4-safe bottom-4-safe z-20">
      <template #icon>
        <component :is="PlusIcon" />
      </template>
    </i-fab>

    <!-- Left Bottom -->
    <i-fab class="fixed left-4-safe bottom-4-safe z-20 k-color-brand-green">
      <template #icon>
        <component :is="PlusIcon" />
      </template>
    </i-fab>

    <!-- Left Top -->
    <i-fab
      class="fixed left-4-safe ios:top-15-safe material:top-18-safe z-20 k-color-brand-yellow"
    >
      <template #icon>
        <component :is="PlusIcon" />
      </template>
    </i-fab>

    <!-- Center Center -->
    <i-fab
      class="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20"
    >
      <template #icon>
        <component :is="PlusIcon" />
      </template>
    </i-fab>

    <!-- Center Bottom -->
    <i-fab
      class="fixed left-1/2 bottom-4-safe transform -translate-x-1/2 z-20"
      text="Create"
      text-position="after"
      ><template #icon>
        <component :is="PlusIcon" />
      </template>
    </i-fab>

    <i-block class="space-y-4">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem
        beatae, delectus eligendi est saepe molestias perferendis suscipit,
        commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.
      </p>
      <p>
        Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a,
        quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores
        ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam
        unde.
      </p>
      <p>
        Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam,
        exercitationem dolores odio sapiente provident. Accusantium id, itaque
        aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem
        sequi facere quas quidem magnam reprehenderit.
      </p>
      <p>
        Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi
        consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae
        facere voluptates atque similique odit mollitia, rerum placeat nobis
        est.
      </p>
      <p>
        Et impedit soluta minus a autem adipisci cupiditate eius dignissimos
        nihil officia dolore voluptatibus aperiam reprehenderit esse facilis
        labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio
        assumenda veniam, ipsum alias.
      </p>
    </i-block>
    <i-block class="space-y-4">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa
        debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus,
        tempora quia quos voluptatibus corporis officia at quas dolorem earum!
      </p>
      <p>
        Quod soluta eos inventore magnam suscipit enim at hic in maiores
        temporibus pariatur tempora minima blanditiis vero autem est
        perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut
        odit aliquam adipisci.
      </p>
      <p>
        Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam
        aperiam, animi fuga veritatis consectetur, voluptatibus atque
        consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci
        sint, iusto blanditiis ullam? Vel?
      </p>
      <p>
        Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis
        temporibus consequatur expedita eaque aliquid quos accusamus fugiat id
        iusto autem obcaecati repellat fugit cupiditate suscipit natus quas
        doloribus? Temporibus necessitatibus, libero.
      </p>
      <p>
        Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae
        obcaecati possimus, labore excepturi reprehenderit consectetur
        perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur
        in eveniet, deleniti recusandae omnis eum quas?
      </p>
      <p>
        Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda
        quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam,
        recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde
        deleniti quisquam, nobis?
      </p>
      <p>
        Atque qui quaerat quasi officia molestiae, molestias totam incidunt
        reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam
        obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum
        esse recusandae voluptatibus eligendi.
      </p>
    </i-block>
  </i-page>
</template>
<script>
  import { computed } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlock,
    iFab,
    useTheme,
  } from 'ina-ui/vue';
  import { Plus } from 'framework7-icons/vue';
  import MdAdd from '../components/MdAdd.vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlock,
      iFab,
    },
    setup() {
      const theme = useTheme();
      const PlusIcon = computed(() => (theme.value === 'ios' ? Plus : MdAdd));

      return {
        theme,
        PlusIcon,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  Fab,
  useTheme,
} from 'ina-ui/react';
import { Plus } from 'framework7-icons/react';
import { MdAdd } from 'react-icons/md';

export default function FabPage() {
  const theme = useTheme();
  const PlusIcon = theme === 'ios' ? Plus : MdAdd;

  return (
    <Page>
      <Navbar
        title="FAB"
        />

      {/* Right Top */}
      <Fab
        className="fixed right-4-safe ios:top-15-safe material:top-18-safe z-20 k-color-brand-red"
        icon={<PlusIcon />}
      />

      {/* Right Bottom */}
      <Fab
        className="fixed right-4-safe bottom-4-safe z-20"
        icon={<PlusIcon />}
      />

      {/* Left Bottom */}
      <Fab
        className="fixed left-4-safe bottom-4-safe z-20 k-color-brand-green"
        icon={<PlusIcon />}
      />

      {/* Left Top */}
      <Fab
        className="fixed left-4-safe ios:top-15-safe material:top-18-safe z-20 k-color-brand-yellow"
        icon={<PlusIcon />}
      />

      {/* Center Center */}
      <Fab
        className="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20"
        icon={<PlusIcon />}
      />

      {/* Center Bottom */}
      <Fab
        className="fixed left-1/2 bottom-4-safe transform -translate-x-1/2 z-20"
        icon={<PlusIcon />}
        text="Create"
        textPosition="after"
      />

      <Block className="space-y-4">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo
          rem beatae, delectus eligendi est saepe molestias perferendis
          suscipit, commodi labore ipsa non quasi eum magnam neque ducimus!
          Quasi, numquam.
        </p>
        <p>
          Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a,
          quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores
          ipsa, mollitia perferendis consectetur quam eaque, voluptate
          laboriosam unde.
        </p>
        <p>
          Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam,
          exercitationem dolores odio sapiente provident. Accusantium id, itaque
          aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem
          sequi facere quas quidem magnam reprehenderit.
        </p>
        <p>
          Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi
          consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae
          facere voluptates atque similique odit mollitia, rerum placeat nobis
          est.
        </p>
        <p>
          Et impedit soluta minus a autem adipisci cupiditate eius dignissimos
          nihil officia dolore voluptatibus aperiam reprehenderit esse facilis
          labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio
          assumenda veniam, ipsum alias.
        </p>
      </Block>
      <Block className="space-y-4">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa
          debitis sed nihil eaque dolore cum iste quibusdam, accusamus
          doloribus, tempora quia quos voluptatibus corporis officia at quas
          dolorem earum!
        </p>
        <p>
          Quod soluta eos inventore magnam suscipit enim at hic in maiores
          temporibus pariatur tempora minima blanditiis vero autem est
          perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut
          odit aliquam adipisci.
        </p>
        <p>
          Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam
          aperiam, animi fuga veritatis consectetur, voluptatibus atque
          consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci
          sint, iusto blanditiis ullam? Vel?
        </p>
        <p>
          Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis
          temporibus consequatur expedita eaque aliquid quos accusamus fugiat id
          iusto autem obcaecati repellat fugit cupiditate suscipit natus quas
          doloribus? Temporibus necessitatibus, libero.
        </p>
        <p>
          Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae
          obcaecati possimus, labore excepturi reprehenderit consectetur
          perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur
          in eveniet, deleniti recusandae omnis eum quas?
        </p>
        <p>
          Quos nulla consequatur quo, officia quaerat. Nulla voluptatum,
          assumenda quibusdam, placeat cum aut illo deleniti dolores commodi
          odio ipsam, recusandae est pariatur veniam repudiandae blanditiis.
          Voluptas unde deleniti quisquam, nobis?
        </p>
        <p>
          Atque qui quaerat quasi officia molestiae, molestias totam incidunt
          reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam
          obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum
          esse recusandae voluptatibus eligendi.
        </p>
      </Block>
    </Page>
  );
}

FabPage.title = 'FAB (Floating Action Button)';
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/14.floatingactionbtn.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.