Tailwind CSS React Alert - Horizon UI

Get started on your web projects with our Tailwind CSS React Alert which provides contextual feedback messages for typical user actions.

An Alert displays a short and important message attracting the user's attention without interrupting the user's task. Use this element when you need to show highly-important messages to users or when you need a persistent static container that is closable by user actions.

See below our simple Alert example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.

Title here Description here.

import { SolidSubtleAlert } from "./components/SolidSubtleAlert";
 
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-brand-500 dark:!bg-brand-400"
  solid="solid"
/>

Solid Alert - Left

This Solid Alert component comes with 5 different color variants aligned to the left.

Title here Description here.

import { SolidSubtleAlert } from "./components/SolidSubtleAlert";
 
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-brand-500 dark:!bg-brand-400"
  solid="solid"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-red-500 dark:!bg-red-400"
  solid="solid"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-amber-500 dark:!bg-amber-400"
  solid="solid"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-blue-500 dark:!bg-blue-400"
  solid="solid"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-green-500 dark:!bg-green-400"
  solid="solid"
/>

Solid Alert - Center

This Solid Alert component comes with 5 different color variants aligned to the center.

Title here Description here.

import { SolidSubtleAlert } from "./components/SolidSubtleAlert";
 
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-brand-500 dark:!bg-brand-400"
  solid="solid"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-red-500 dark:!bg-red-400"
  solid="solid"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-amber-500 dark:!bg-amber-400"
  solid="solid"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-blue-500 dark:!bg-blue-400"
  solid="solid"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-green-500 dark:!bg-green-400"
  solid="solid"
/>

Subtle Alert - Left

This Subtle Alert component comes with 5 different color variants aligned to the left.

Title here Description here.

import { SolidSubtleAlert } from "./components/SolidSubtleAlert";
 
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-brand-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-brand-50 dark:!bg-navy-700"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-red-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-[#FDE0D0] dark:!bg-navy-700"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-amber-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-[#FFF6DA] dark:!bg-navy-700"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-blue-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-brand-50 dark:!bg-navy-700"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-green-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-[#C9FBD5] dark:!bg-navy-700"
/>

Subtle Alert - Center

This Subtle Alert component comes with 5 different color variants aligned to the center.

Title here Description here.

import { SolidSubtleAlert } from "./components/SolidSubtleAlert";
 
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-brand-500"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-brand-50 dark:!bg-navy-700"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-red-500"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-[#FDE0D0] dark:!bg-navy-700"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-amber-500"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-[#FFF6DA] dark:!bg-navy-700"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-blue-500"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-brand-50 dark:!bg-navy-700"
/>
<SolidSubtleAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-green-500"
  justify="justify-center"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-[#C9FBD5] dark:!bg-navy-700"
/>

Solid MultiAlert

This Solid MultiAlert component comes with 5 different color variants.

Title here Description here.

import { SolidSubtleMultiAlert } from "./components/SolidSubtleMultiAlert";
 
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-brand-500 dark:!bg-brand-400"
  solid="solid"
/>
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-red-500 dark:!bg-red-400"
  solid="solid"
/>
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-amber-500 dark:!bg-amber-400"
  solid="solid"
/>
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-blue-500 dark:!bg-blue-400"
  solid="solid"
/>
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-white"
  closeBg="hover:bg-white/20 text-white"
  bg="bg-green-500 dark:!bg-green-400"
  solid="solid"
/>

Subtle MultiAlert

This Subtle MultiAlert component comes with 5 different color variants.

Title here Description here.

import { SolidSubtleMultiAlert } from "./components/SolidSubtleMultiAlert";
 
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-brand-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-brand-50 dark:!bg-navy-700"
/>
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-red-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-[#FDE0D0] dark:!bg-navy-700"
/>
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-amber-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-[#FFF6DA] dark:!bg-navy-700"
/>
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-blue-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-brand-50 dark:!bg-navy-700"
/>
<SolidSubtleMultiAlert
  title="Title here"
  description="Description here."
  icon={<AiFillExclamationCircle />}
  iconColor="text-green-500"
  closeBg="hover:bg-white/20 text-navy-700 dark:text-white"
  bg="bg-[#C9FBD5] dark:!bg-navy-700"
/>

actions

avatar