React 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 React 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 React and you can also add any type of content inside the alert box.

To start using the alert box you need to import the <Alert> component from the flowbite-react package:

'use client';

import { Alert } from 'flowbite-react';

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 of 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.

Edit on GitHub
  • React TypeScript
'use client';

import { Alert } from 'flowbite-react';

export default function DefaultAlert() {
  return (
    <Alert color="info">
      <span>
        <p>
          <span className="font-medium">
            Info alert!
          </span>
          Change a few things up and try submitting again.
        </p>
      </span>
    </Alert>
  )
}

Alert with icon

Use the icon prop to add an icon to the alert box and you can use any icon from the React Icons library.

Edit on GitHub
  • React TypeScript
'use client';

import { Alert } from 'flowbite-react';
import { HiInformationCircle } from 'react-icons/hi';

export default function AlertWithIcon() {
  return (
    <Alert
      color="failure"
      icon={HiInformationCircle}
    >
      <span>
        <p>
          <span className="font-medium">
            Info alert!
          </span>
          Change a few things up and try submitting again.
        </p>
      </span>
    </Alert>
  )
}

Dismissable 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.

Edit on GitHub
  • React TypeScript
'use client';

import { Alert } from 'flowbite-react';

export default function DismissableAlert() {
  return (
    <Alert
      color="success"
      onDismiss={()=>alert("Alert dismissed!")}
    >
      <span>
        <p>
          <span className="font-medium">
            Info alert!
          </span>
          Change a few things up and try submitting again.
        </p>
      </span>
    </Alert>
  )
}

Rounded alert

To make the alert box rounded you can use the rounded prop on the <Alert> component.

Edit on GitHub
  • React TypeScript
'use client';

import { Alert } from 'flowbite-react';

export default function Rounded() {
  return (
    <Alert
      color="warning"
      rounded
    >
      <span>
        <p>
          <span className="font-medium">
            Info alert!
          </span>
          Change a few things up and try submitting again.
        </p>
      </span>
    </Alert>
  )
}

Border accent

Add a border accent to the alert box by applying the withBorderAccent prop on the <Alert> component.

Edit on GitHub
  • React TypeScript
'use client';

import { Alert } from 'flowbite-react';

export default function BorderAccent() {
  return (
    <Alert
      color="warning"
      withBorderAccent
    >
      <span>
        <p>
          <span className="font-medium">
            Info alert!
          </span>
          Change a few things up and try submitting again.
        </p>
      </span>
    </Alert>
  )
}

Additional content

Add additional content by using the additionalContent prop and add any type of content inside of it.

Edit on GitHub
  • React TypeScript
'use client';

import { Alert } from 'flowbite-react';
import { HiInformationCircle } from 'react-icons/hi';

export default function AdditionalContent() {
  return (
    <Alert
      additionalContent={<ExampleAdditionalContent />}
      color="warning"
      icon={HiInformationCircle}
    >
      <span>
        <p>
          <span className="font-medium">
            Info alert!
          </span>
          Change a few things up and try submitting again.
        </p>
      </span>
    </Alert>
  )
}

All options

This is an example with all of the available options and props for the alert component.

Edit on GitHub
  • React TypeScript
'use client';

import { Alert } from 'flowbite-react';
import { HiInformationCircle } from 'react-icons/hi';

export default function AllOptions() {
  return (
    <Alert
      additionalContent={<ExampleAdditionalContent />}
      color="success"
      icon={HiInformationCircle}
      onDismiss={()=>alert("Alert dismissed!")}
      rounded
    >
      <span>
        <p>
          <span className="font-medium">
            Info alert!
          </span>
          Change a few things up and try submitting again.
        </p>
      </span>
    </Alert>
  )
}

References