Qwik alert - Flowbite
Get started with the alert component to show contextual information to the user such as when validating forms or showing errors based on Qwik and Tailwind CSS
The alert component can be used to show a contextual text to the user such as a success or error message after form validation inside an alert box where you can choose from multiple colors, sizes, and styles.
The examples below are styled with Tailwind CSS and the reactivity is handled by Qwik and you can also add any type of content inside the alert box.
To start using the alert box you need to import it from the flowbite-qwik package :
import { Alert } from "flowbite-qwik"
Default alert
The default alert component is a simple alert box with a text inside it, and you can use the color prop to change the color of the alert box and the title prop to add a title to the alert box. Inside the <Alert> component you can add any type of content such as text, images, or other components as they will be considered children of the alert box.
import { component$ } from '@builder.io/qwik'
import { Alert } from 'flowbite-qwik'
export default component$(() => {
return (
<Alert color="info">
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</Alert>
)
})
Alert with icon
Use the icon prop to add an icon to the alert box, and you can use any icon from the Flowbite Qwik Icons library.
import { component$ } from '@builder.io/qwik'
import { Alert } from 'flowbite-qwik'
import { IconInfoCircleOutline } from 'flowbite-qwik-icons'
export default component$(() => {
return (
<Alert color="failure" icon={IconInfoCircleOutline}>
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</Alert>
)
})
Dismissible alert
You can use the onDismiss prop on the <Alert> component to add a dismiss button to the alert box by adding a function inside of it that will be called when the user clicks on the dismiss button.
import { component$ } from '@builder.io/qwik'
import { Alert } from 'flowbite-qwik'
export default component$(() => {
return (
<Alert
color="success"
onDismiss$={() => {
alert('Alert dismissed!')
}}
>
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</Alert>
)
})
Rounded alert
To make the alert box rounded you can use the rounded prop on the <Alert> component.
import { component$ } from '@builder.io/qwik'
import { Alert } from 'flowbite-qwik'
export default component$(() => {
return (
<Alert color="warning" rounded>
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</Alert>
)
})
Border accent
Add a border accent to the alert box by applying the withBorderAccent prop on the <Alert> component.
import { component$ } from '@builder.io/qwik'
import { Alert } from 'flowbite-qwik'
export default component$(() => {
return (
<Alert color="warning" withBorderAccent>
<span>
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</span>
</Alert>
)
})
Additional content
Add additional content by using the additionalContent prop and add any type of content inside of it.
import { component$ } from '@builder.io/qwik'
import { Alert } from 'flowbite-qwik'
import { IconEyeOutline, IconInfoCircleOutline } from 'flowbite-qwik-icons'
export default component$(() => {
return (
<Alert additionalContent={<ExampleAdditionalContent />} color="warning" icon={IconInfoCircleOutline}>
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</Alert>
)
})
const ExampleAdditionalContent = component$(() => {
return (
<>
<div class="mb-4 mt-2 text-sm text-cyan-700 dark:text-cyan-800">
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">
<button
type="button"
class="mr-2 inline-flex items-center rounded-lg bg-cyan-700 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-cyan-800 focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-800 dark:hover:bg-cyan-900"
>
<IconEyeOutline class="-ml-0.5 mr-2 h-4 w-4" />
View more
</button>
<button
type="button"
class="rounded-lg border border-cyan-700 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-cyan-700 hover:bg-cyan-800 hover:text-white focus:ring-4 focus:ring-cyan-300 dark:border-cyan-800 dark:text-cyan-800 dark:hover:text-white"
>
Dismiss
</button>
</div>
</>
)
})
Alert All options
This is an example with all the available options and props for the alert component.
import { component$ } from '@builder.io/qwik'
import { Alert } from 'flowbite-qwik'
import { IconEyeOutline, IconInfoCircleOutline } from 'flowbite-qwik-icons'
export default component$(() => {
return (
<Alert
additionalContent={<ExampleAdditionalContent />}
color="success"
icon={IconInfoCircleOutline}
onDismiss$={() => {
alert('Alert dismissed!')
}}
rounded
>
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</Alert>
)
})
const ExampleAdditionalContent = component$(() => {
return (
<>
<div class="mb-4 mt-2 text-sm text-cyan-700 dark:text-cyan-800">
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">
<button
type="button"
class="mr-2 inline-flex items-center rounded-lg bg-cyan-700 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-cyan-800 focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-800 dark:hover:bg-cyan-900"
>
<IconEyeOutline class="-ml-0.5 mr-2 h-4 w-4" />
View more
</button>
<button
type="button"
class="rounded-lg border border-cyan-700 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-cyan-700 hover:bg-cyan-800 hover:text-white focus:ring-4 focus:ring-cyan-300 dark:border-cyan-800 dark:text-cyan-800 dark:hover:text-white"
>
Dismiss
</button>
</div>
</>
)
})