Fab

Floating Action Button (FAB) is an action button that floats above the user interface and should be used for actions that stands out among the rest of the UI.

Label

The label attribute controls Fab’s label text.

<script setup lang="ts">
import { VFab, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VFab label="Add to cart">
    <template #icon>
      <VIcon name="cart-line" />
    </template>
  </VFab>
</template>

Connotation

The connotation attribute controls the purpose of the Fab, expressed in its colors.

<script setup lang="ts">
import { VFab, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VFab label="Add default">
    <template #icon>
      <VIcon name="plus-line" />
    </template>
  </VFab>
  <VFab label="Add accent" connotation="accent">
    <template #icon>
      <VIcon name="plus-line" />
    </template>
  </VFab>
  <VFab label="Add CTA" connotation="cta">
    <template #icon>
      <VIcon name="plus-line" />
    </template>
  </VFab>
  <VFab label="Add announcement" connotation="announcement">
    <template #icon>
      <VIcon name="plus-line" />
    </template>
  </VFab>
</template>

<vwc-fab label="Add default">
  <vwc-icon slot="icon" name="plus-line"></vwc-icon>
</vwc-fab>
<vwc-fab label="Add accent" connotation="accent">
  <vwc-icon slot="icon" name="plus-line"></vwc-icon>
</vwc-fab>
<vwc-fab label="Add CTA" connotation="cta">
  <vwc-icon slot="icon" name="plus-line"></vwc-icon>
</vwc-fab>
<vwc-fab label="Add announcement" connotation="announcement">
  <vwc-icon slot="icon" name="plus-line"></vwc-icon>
</vwc-fab>

Icon

Use the icon slot to add an icon from the icon library. You can render it on the leading side (default) or trailing side (icon-trailing).

<script setup lang="ts">
import { VFab, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VFab label="Add Action">
    <template #icon>
      <VIcon name="plus-line" />
    </template>
  </VFab>
  <VFab icon-trailing label="icon-trailing">
    <template #icon>
      <VIcon name="cart-line" />
    </template>
  </VFab>
</template>

<vwc-fab label="Add Action">
  <vwc-icon slot="icon" name="plus-line"></vwc-icon>
</vwc-fab>{' '}
<vwc-fab icon-trailing label="icon-trailing">
  <vwc-icon slot="icon" name="cart-line"></vwc-icon>
</vwc-fab>

Icon Only

If the label is omitted, the Fab will be displayed as an icon-only Fab.

When an element has no visible text, provide an accessible name using the aria-labelattribute. This ensures screen reader users can understand the element’s purpose, even when it’s represented only by an icon or visual styling.

<script setup lang="ts">
import { VFab, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VFab aria-label="Icon only FAB button">
    <template #icon>
      <VIcon name="check-line" />
    </template>
  </VFab>
</template>

Size

The size attribute controls the size of the Fab.

<script setup lang="ts">
import { VFab, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VFab label="condensed" size="condensed">
    <template #icon>
      <VIcon name="thumbs-up-line" />
    </template>
  </VFab>
  <VFab label="normal (default)" size="normal">
    <template #icon>
      <VIcon name="thumbs-up-line" />
    </template>
  </VFab>
  <VFab label="expanded" size="expanded">
    <template #icon>
      <VIcon name="thumbs-up-line" />
    </template>
  </VFab>
</template>

<vwc-fab label="condensed" size="condensed">
  <vwc-icon slot="icon" name="thumbs-up-line"></vwc-icon>
</vwc-fab>
<vwc-fab label="normal (default)" size="normal">
  <vwc-icon slot="icon" name="thumbs-up-line"></vwc-icon>
</vwc-fab>
<vwc-fab label="expanded" size="expanded">
  <vwc-icon slot="icon" name="thumbs-up-line"></vwc-icon>
</vwc-fab>

Disabled

The disabled attribute disables the Fab and indicates that the action is not available.

Disabled buttons should be used with caution. Read our guidelines for when to disabled buttons.

<script setup lang="ts">
import { VFab, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VFab disabled>
    <template #icon>
      <VIcon name="store-line" label="Home" />
    </template>
  </VFab>
</template>