Alert

A simple alert component for showing alert messages.

import { Alert } from "rizzui";

Variants

You can change the style of Alert using the variant property.

Flat variant

Attention All! We are excited to announce the launch of our new product/service.

Outline variant

Attention All! We are excited to announce the launch of our new product/service.

import { Alert, Text } from "rizzui";

export default function App() {
  return (
    <>
      <Alert variant="flat" color="info">
        <Text className="font-semibold">Flat variant</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="info">
        <Text className="font-semibold">Outline variant</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
    </>
  );
}

Sizes

You can set diffirent size of the Alert using size property.

Alert Small

Attention All! We are excited to announce the launch of our new product/service.

Alert Default

Attention All! We are excited to announce the launch of our new product/service.

Alert Large

Attention All! We are excited to announce the launch of our new product/service.

Alert Extra Large

Attention All! We are excited to announce the launch of our new product/service.

import { Alert } from "rizzui";

export default function App() {
  return (
    <>
      <Alert size="sm" color="danger">
        <Text className="font-semibold">Alert Small</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="danger">
        <Text className="font-semibold">Alert Default</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert size="lg" color="danger">
        <Text className="font-semibold">Alert Large</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert size="xl" color="danger">
        <Text className="font-semibold">Alert Extra Large</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
    </>
  );
}

Rounded

Change border radius of the Alert component using rounded property.

Rounded None

Attention All! We are excited to announce the launch of our new product/service.

Rounded Small

Attention All! We are excited to announce the launch of our new product/service.

Rounded Default

Attention All! We are excited to announce the launch of our new product/service.

Rounded Large

Attention All! We are excited to announce the launch of our new product/service.

Rounded Extra Large

Attention All! We are excited to announce the launch of our new product/service.

import { Alert } from "rizzui";

export default function App() {
  return (
    <>
      <Alert color="success" rounded="none">
        <Text className="font-semibold">Alert Rounded None</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="success" rounded="sm">
        <Text className="font-semibold">Alert Rounded Small</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="success">
        <Text className="font-semibold">Alert Rounded Default</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="success" rounded="lg">
        <Text className="font-semibold">Alert Rounded Large</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="success" rounded="xl">
        <Text className="font-semibold">Alert Rounded Extra Large</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
    </>
  );
}

Colors

You can set different states of Alert using color property.

Danger Alert

Attention All! We are excited to announce the launch of our new product/service.

Info Alert

Attention All! We are excited to announce the launch of our new product/service.

Success Alert

Attention All! We are excited to announce the launch of our new product/service.

Warning Alert

Attention All! We are excited to announce the launch of our new product/service.

import { Alert } from "rizzui";

export default function App() {
  return (
    <>
      <Alert color="danger" variant="flat">
        <Text className="font-semibold">Danger Alert</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="info" variant="flat">
        <Text className="font-semibold">Info Alert</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="success" variant="flat">
        <Text className="font-semibold">Success Alert</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="warning" variant="flat">
        <Text className="font-semibold">Warning Alert</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
    </>
  );
}

Custom Icons

You can change style of Alert with property icon, clearIcon.

Customizable icon Alert

Attention All! We are excited to announce the launch of our new product/service.

import { Alert } from "rizzui";
import { EnvelopeIcon, TrashIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <Alert
      color="info"
      icon={<EnvelopeIcon className="w-6 text-blue-dark" />}
      clearIcon={<TrashIcon className="w-6 text-blue-dark" />}
    >
      <Text className="font-semibold">Customizable icon Alert</Text>
      <Text>
        Attention All! We are excited to announce the launch of our new
        product/service.
      </Text>
    </Alert>
  );
}

With Bar

You can make a classic bar Alert by using bar property.

Danger Alert

Attention All! We are excited to announce the launch of our new product/service.

Info Alert

Attention All! We are excited to announce the launch of our new product/service.

Success Alert

Attention All! We are excited to announce the launch of our new product/service.

Warning Alert

Attention All! We are excited to announce the launch of our new product/service.

import { Alert } from "rizzui";

export default function App() {
  return (
    <>
      <Alert color="danger" bar={true}>
        <Text className="font-semibold">Danger Alert</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="info" bar={true}>
        <Text className="font-semibold">Info Alert</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="success" bar={true}>
        <Text className="font-semibold">Success Alert</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
      <Alert color="warning" bar={true}>
        <Text className="font-semibold">Warning Alert</Text>
        <Text>
          Attention All! We are excited to announce the launch of our new
          product/service.
        </Text>
      </Alert>
    </>
  );
}

With Close Button

You can make a closable Alert component using closable property.

Alert with info

Attention All! We are excited to announce the launch of our new product/service.

import React from "react";
import { Alert, Button } from "rizzui";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(true);
  return (
    <>
      <Button
        color="info"
        onClick={() => setIsOpen(true)}
        className="tracking-wider"
      >
        Info Alert
      </Button>
      {isOpen && (
        <Alert
          color="info"
          variant="flat"
          closable
          onClose={() => setIsOpen(false)}
        >
          <Text className="font-semibold">Alert with info</Text>
          <Text>
            Attention All! We are excited to announce the launch of our new
            product/service.
          </Text>
        </Alert>
      )}
    </>
  );
}

API Reference

Alert Props

Here is the API documentation of the Alert component. You can use these props to customize our Alert component.

Props	Type	Description	Default
color	AlertColors	Change color	__
children	`ReactNode`	Pass alert message as children	__
size	AlertSizes	The size of the component.	`md"`
rounded	AlertRounded	The rounded variants are:	`"md"`
variant	`flat` `outline`	The variants of the component are:	`"outline"`
bar	`boolean`	Whether left bar should be visible	`"false"`
closable	`boolean`	Add closable option	__
onClose	AlertOnClose	Pass onClose function to clear alert	__
icon	`ReactNode`	Customize alert icon according to your preference	__
closeIcon	`ReactNode`	Customize close icon according to your preference	__
className	`string`	Add className to design the container	__
barClassName	`string`	Add barClassName to design the left bar	__
iconContainerClassName	`string`	Add iconContainerClassName to position the icons	__
iconClassName	`string`	Add iconClassName to design the default icons	__

Alert Colors

type AlertColors = "danger" | "info" | "success" | "warning";

Alert Sizes

type AlertSizes = "sm" | "md" | "lg" | "xl";

Alert Rounded

type AlertRounded = "sm" | "md" | "lg" | "xl" | "none";

Alert onClose

type AlertOnClose = (event: MouseEvent<Element, MouseEvent>) => void;

Variants​

Sizes​

Rounded​

Colors​

Custom Icons​

With Bar​

With Close Button​

API Reference​

Alert Props​

Alert Colors​

Alert Sizes​

Alert Rounded​

Alert onClose​

Variants

Sizes

Rounded

Colors

Custom Icons

With Bar

With Close Button

API Reference

Alert Props

Alert Colors

Alert Sizes

Alert Rounded

Alert onClose