Qwik toast - Flowbite

Push notifications to your website visitors using the toast component and choose from multiple sizes, colors, styles, position and icons based on Qwik and Tailwind CSS

The toast component can be used to show notifications to your users in a non-intrusive way by positioning it to the corner of the screen. It can be used to show simple messages or more complex ones with buttons and other elements.

Choose from one of the examples below that include different layouts, colors, styles, and icons that you can also customize using Qwik props and the utility classes from Tailwind CSS.

To start using the toast component make sure you import it from flowbite-qwik :

import { Toast } from "flowbite-qwik"

Props type

Use these contextual toast components to show success, danger, or warning alert messages to your users.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Toast } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-col space-y-2 p-3">
      <Toast id="default">Default</Toast>
      <Toast id="success" type="success">
        Success
      </Toast>
      <Toast id="danger" type="danger">
        Danger
      </Toast>
      <Toast id="warning" type="warning">
        Warning
      </Toast>
    </div>
  )
})

Props divide

Use divide prop to add a dividing line between the toast content and the close button.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Toast } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-col space-y-2 p-3">
      <Toast id="default" divide>
        Default
      </Toast>
      <Toast id="success" divide type="success">
        Success
      </Toast>
      <Toast id="danger" divide type="danger">
        Danger
      </Toast>
      <Toast id="warning" divide type="warning">
        Warning
      </Toast>
    </div>
  )
})

Message

This component can be used to show messages and a CTA button when receiving chat messages, comment notifications, and other use cases.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Button, Toast } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex flex-col space-y-2 p-3">
      <Toast
        id="card"
        alignment="start"
        icon={
          <img
            alt="Avatar"
            class="h-8 w-8 rounded-lg shadow-lg"
            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"
          />
        }
      >
        <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
        <div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
        <Button size="xs" href="#">
          Reply
        </Button>
      </Toast>
    </div>
  )
})

Playground

Use the playground to test different toast positions and types.

Edit on GitHub
tsx
import { component$, useContext, useSignal } from '@builder.io/qwik'
import { Link, StaticGenerateHandler } from '@builder.io/qwik-city'
import { Button, Select, ToastPosition, useToast } from 'flowbite-qwik'
import { toastPositionContext } from '~/root'

export default component$(() => {
  const toastPosition = useContext(toastPositionContext)

  const selected = useSignal('top-right')
  const positions = [
    { value: 'top-right', name: 'top-right' },
    { value: 'top-left', name: 'top-left' },
    { value: 'bottom-left', name: 'bottom-left' },
    { value: 'bottom-right', name: 'bottom-right' },
  ]

  const { add } = useToast()

  return (
    <div class="flex flex-col space-y-2 p-3">
      <Select
        bind:value={selected}
        options={positions}
        label="Select an position"
        onChange$={() => {
          toastPosition.value = selected.value as ToastPosition
        }}
      />

      <div class="flex gap-3">
        <Button
          onClick$={() =>
            add({
              type: 'success',
              text: 'This is a success toast',
              closable: true,
            })
          }
        >
          Add success toast from
        </Button>
        <Button
          onClick$={() =>
            add({
              type: 'danger',
              text: 'This is a danger toast',
              closable: true,
              time: 2000,
            })
          }
        >
          Add danger toast with autoclose timer
        </Button>
      </div>
      <Link href="/docs/getting-started/quickstart" class="text-blue-500 underline">
        The toast position should be defined in the FlowbiteProvider
      </Link>
    </div>
  )
})