Alert

A simple alert component for showing alert messages.

import { Alert } from 'rizzui/alert';

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.

import { Alert } from 'rizzui/alert';

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>
    </>
  );
}

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/alert';

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/alert';
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/alert';

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"
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';

Alert onClose

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