Alert | Pol-ui - A beautiful and functional UI library for React and Next.js

Introduction

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 pol-ui package:

import { Alert } from "pol-ui";

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.

Default alert

import { Alert } from "pol-ui";
import React from "react";
const AlertComponent = () => {
  return (
    <Alert>
      An alert could be an incredible useful component when showing an important
      advice is needed. You can easily customize it's colors, actions and texts.
      Use it for feedback or warnings.
    </Alert>
  );
};
export default AlertComponent;

Props

Prop name	Type	Default	Description
icon	React.ReactNode	null	The icon to display in the accordion panel.
onDismiss	() => void	null	Callback to be called when the alert is dismissed.
children	React.ReactNode	null	The content to display in the alert.
additionalContent	React.ReactNode	null	Additional content to display in the alert.
color	Colors	"secondary"	The color of the alert.
rounded	RoundedEnum	'md'	The border radius of the alert.
theme	AlertTheme	alertTheme	The theme of the alert.
bordered	boolean	false	Whether to add a border accent to the alert.

Examples

OnDismiss

You can use the onDismiss prop to add a close button to the alert box and a callback to be called when the alert is dismissed.

Any function can be passed to the onDismiss prop and it will be called when the alert is dismissed.

Always open example

import { Alert } from "pol-ui";
import React from "react";
const AlertComponent = () => {
  return (
    <Alert onDismiss={() => alert("Alert dismissed!")}>
      An alert could be an incredible useful component when showing an important
      advice is needed. You can easily customize it's colors, actions and texts.
      Use it for feedback or warnings.
    </Alert>
  );
};
export default AlertComponent;

With icon

You can use the icon prop to add an icon to the alert box. As usual, you can provide any time of svg as a React component to the icon prop.

Alert with icon

import { Alert } from "pol-ui";
import React from "react";
import { TbBulb } from "react-icons/tb";
 
const AlertComponent = () => {
  return (
    <Alert icon={TbBulb}>
      An alert could be an incredible useful component when showing an important
      advice is needed. You can easily customize it's colors, actions and texts.
      Use it for feedback or warnings.
    </Alert>
  );
};
export default AlertComponent;

Bordered

You can use the icon prop to add an icon to the alert box. As usual, you can provide any time of svg as a React component to the icon prop.

Alert Bordered

import { Alert } from "pol-ui";
import React from "react";
const AlertComponent = () => {
  return (
    <Alert bordered color="warning">
      An alert could be an incredible useful component when showing an important
      advice is needed. You can easily customize it's colors, actions and texts.
      Use it for feedback or warnings.
    </Alert>
  );
};
export default AlertComponent;

Additional content

You can use the icon prop to add an icon to the alert box. As usual, you can provide any time of svg as a React component to the icon prop.

Additional content

import { Alert } from "pol-ui";
import React from "react";
const AlertComponent = () => {
  return (
    <Alert bordered color="warning">
      An alert could be an incredible useful component when showing an important
      advice is needed. You can easily customize it's colors, actions and texts.
      Use it for feedback or warnings.
    </Alert>
  );
};
export default AlertComponent;

Additional content

You can use the icon prop to add an icon to the alert box. As usual, you can provide any time of svg as a React component to the icon prop.

Complete Alert

import { Alert, ColorsEnum } from "pol-ui";
import React from "react";
import { TbInfoCircle } from "react-icons/tb";
const AlertComponent = () => {
  return (
    <Alert
      bordered
      color={ColorsEnum.info}
      rounded="none"
      icon={TbInfoCircle}
      additionalContent={
        <>
          <div className="mb-4 mt-2 text-sm text-info-700 dark:text-info-800">
            This is the component comming from additionalContent as a prop,
            could be used when you need to present a large text that is better
            be cutted due to the icon.
          </div>
          <div className="flex gap-2">
            <Button color={ColorsEnum.info}>
              <BiCheck className="h-4 w-4" />
              Understood
            </Button>
 
            <Button color={ColorsEnum.secondary}>Dismiss</Button>
          </div>
        </>
      }
    >
      <h3 className="text-lg font-medium text-cyan-700 dark:text-cyan-800">
        This is a info alert
      </h3>
      This content is the real one, the children.
    </Alert>
  );
};
export default AlertComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface AlertTheme {
  base: string;
  borderAccent: string;
  color: ColorsType;
  icon: string;
  rounded: string;
  wrapper: string;
}