flowbite-vue Documentation

The FwbAlert component supports several slots to build complex layouts including headings, custom icons, and structured body content.

Available Slots

• title: Renders content above the main body.
• icon: Allows you to provide a custom icon to replace the default type-based icon.
• close-icon: Allows you to provide a custom icon for the close button.
• default: The main body content. When using the closable prop, the default slot provides an onCloseClick function via scoped slots to manually trigger dismissal.

Example: Rich Alert with Title and Custom Body

<template>
  <fwb-alert type="info">
    <template #icon>
      <!-- Your custom SVG icon here -->
    </template>
    <template #title>
      <h3 class="text-lg font-medium">Alert Title</h3>
    </template>
    <template #default="{ onCloseClick }">
      <p>Detailed information goes here.</p>
      <button @click="onCloseClick">Dismiss</button>
    </template>
  </fwb-alert>
</template>

<template>
  <fwb-alert type="info">
    <template #icon>
      <svg
        class="shrink-0 w-4 h-4 mr-2"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
      </svg>
      <span class="sr-only">Info</span>
    </template>
    <template #title>
      <h3 class="text-lg font-medium">
        This is a info alert
      </h3>
    </template>
    <template #default="{ onCloseClick }">
      <div class="mt-2 mb-4 text-sm">
        More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
      </div>
      <div class="flex">
        <fwb-button
          color="blue"
          size="sm"
          class="mr-2 inline-flex items-center"
        >
          <template #prefix>
            <svg
              class="size-3"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 20 14"
            >
              <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
            </svg>
          </template>
          View more
        </fwb-button>
        <fwb-button
          size="sm"
          outline
          data-dismiss-target="#alert-additional-content-1"
          aria-label="Close"
          @click="onCloseClick"
        >
          Dismiss
        </fwb-button>
      </div>
    </template>
  </fwb-alert>
</template>

<script setup>
import { FwbAlert, FwbButton } from 'flowbite-vue'
</script>

You can control how users interact with and dismiss the modal using the not-escapable and persistent props.

Escapable Behavior

By default, a modal can be closed by clicking the close button, clicking the overlay, or pressing the Escape key.

• Set not-escapable to true to disable the outside-click and Escape key behaviors. The close button remains visible, and you must close the modal programmatically.

Persistent Behavior

• Set persistent to true to prevent the close event from firing when clicking the overlay or pressing Escape.
• The close button is automatically hidden when persistent is active. Use this for flows where the user MUST interact with the content before proceeding.

<template>
  <!-- Default behavior -->
  <fwb-modal />

  <!-- Disables Escape and outside click, but shows close button -->
  <fwb-modal not-escapable />

  <!-- Disables all passive dismissal and hides close button -->
  <fwb-modal persistent />
</template>

<script setup>
import { FwbModal } from 'flowbite-vue'
</script>

You can customize the visual structure and density of the pagination component using the following props:

• Custom Page Window: Use slice-length to control how many page numbers are shown on each side of the current page. The total visible count is sliceLength + 1 + sliceLength (default is 2).
• Navigation Layout: Set layout="navigation" to render only the previous and next buttons, omitting individual page numbers.
• Table Layout: Set layout="table" to display a summary (e.g., "Showing X to Y of Z"). This layout requires both :per-page and :total-items instead of :total-pages.

<!-- Navigation Layout -->
<fwb-pagination
  v-model="currentPage"
  :layout="'navigation'"
  :total-pages="100"
/>

<!-- Table Layout -->
<fwb-pagination
  v-model="currentPage"
  :layout="'table'"
  :per-page="20"
  :total-items="100"
/>

<!-- Custom Page Window -->
<fwb-pagination
  v-model="currentPage"
  :slice-length="4"
  :total-pages="100"
/>

The Accordion component is a composite UI element used to show and hide content panels. It is built using four specialized sub-components that work together:

1. FwbAccordion: The root wrapper component.
2. FwbAccordionPanel: Represents an individual collapsible section.
3. FwbAccordionHeader: The clickable trigger element that toggles the panel.
4. FwbAccordionContent: The body containing the content to be shown or hidden.

By default, the first panel is open on render, and activating a new panel will automatically collapse any currently open panel.

<template>
  <fwb-accordion>
    <fwb-accordion-panel>
      <fwb-accordion-header>Title</fwb-accordion-header>
      <fwb-accordion-content>
        Content goes here.
      </fwb-accordion-content>
    </fwb-accordion-panel>
  </fwb-accordion>
</template>

<script setup>
import {
  FwbAccordion,
  FwbAccordionPanel,
  FwbAccordionHeader,
  FwbAccordionContent,
} from 'flowbite-vue'
</script>

Use slots to inject custom content into specific parts of the FwbSelect component:

• #chevron: Replace the default dropdown arrow icon with your own content (e.g., a custom SVG).
• #helper: Render supplementary text (like privacy notices or hints) below the select component. This text is automatically linked via aria-describedby for accessibility.
• #validationMessage: Render rich HTML content for validation feedback below the select.

<template>
  <!-- Custom Chevron Slot -->
  <fwb-select v-model="selected" :options="countries">
    <template #chevron>
      <svg class="size-4 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 2a1 1 0 0 1 .707.293l4 4a1 1 0 0 1-1.414 1.414L12 4.414 8.707 7.707a1 1 0 0 1-1.414-1.414l4-4A1 1 0 0 1 12 2Z" />
      </svg>
    </template>
  </fwb-select>

  <!-- Helper Slot -->
  <fwb-select v-model="selected" :options="countries" label="Select a country">
    <template #helper>
      We'll never share your details.
    </template>
  </fwb-select>
</template>