Alert Component

A customizable React component for displaying alerts with various types, skins, and sizes.

Example Preview

Alert Example

Usage

import React from "react";
import { Alert } from "@/@core";
 
const MyComponent = () => {
  return (
    <div>
      <Alert
        type="success"
        skin="light"
        title="Success Alert"
        content="This is a success alert message."
        icon="mdi:check"
        button="OK"
        size="md"
        shape="rounded"
      />
    </div>
  );
};
 
export default MyComponent;

Props

Prop	Type	Description
type	`string`	The type of the alert. Possible values: `'success'`, `'error'`, `'warning'`, `'info'`, `'primary'`, `'secondary'`, `'accent'`, `'base'`.
skin	`string`	The skin of the alert. Possible values: `'light'`, `'dark'`.
title	`ReactNode`,`string`	The title of the alert.
content	`ReactNode`,`string`	The content of the alert.
icon	`ReactNode`,`string`	The icon to be displayed in the alert. If `null`, a default icon is chosen based on the alert type.
button	`ReactNode`,`null`	The button content or element to be displayed in the alert.
size	`string`	The size of the alert. Possible values: `'xs'`, `'sm'`, `'md'`, `'lg'`.
shape	`string`	The shape of the alert. Possible values: `'rounded'`, `'square'`, `'circle'`.
className	`string`	Additional CSS classes to be applied to the alert.

Default Props

Prop	Default Value	Description
type	`'success'`	The default type of the alert.
skin	`'light'`	The default skin of the alert.
title	"Alert Title"	The default title of the alert.
content	"This is an alert"	The default content of the alert.
icon	`null`	The default icon of the alert.
button	`null`	The default button of the alert.
size	`'sm'`	The default size of the alert.
shape	`'rounded'`	The default shape of the alert.
className	`null`	The default additional CSS classes for the alert.

Styling

The alert component supports various styles based on its type, skin, size, and shape. You can customize the appearance further by providing additional CSS classes.

Icons

Icons are powered by the Iconify library (opens in a new tab). You can use either string icon names or provide custom ReactNode icons.

ℹ️

Note: The Alert component is a flexible React component designed for displaying alerts or notifications in your application. It provides support for different variants, icons, and actions to suit various alert scenarios. This component is inspired by the DaisyUI (opens in a new tab) framework's design for alerts. Check it out for more awesome components.

Accordion Avatar