React Alert - Flowbite

Show contextual information to your users using alert elements based on Tailwind CSS

The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page. Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.

Default alert

<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

<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

<Alert
  color="success"
  onDismiss={onDismiss}
>
  <span>
    <p>
      <span className="font-medium">
        Info alert!
      </span>
      Change a few things up and try submitting again.
    </p>
  </span>
</Alert>

Rounded

<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

<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

<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

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