Alert

Information

Please do not alter your input upon submission.

Warning

Please verify your settings.

Error Occurred

The task has been halted, attempt to report.

Success

The task has been completed.

Automatic Installation

npx tofu-ui-cli@latest add alert

Manual Installation (Optional)

Note

If you opt for manual installation, updates will not be available

Create in the project directory:

components/ui/tofu/alert.tsx

Copy this code:

import React, { FC } from 'react';
 
/**
 * TofuUI Alert 警报/通知
 * @author shuakami
 * @version 1.0.0
 * @copyright ByteFreeze&TofuUI
 */
 
interface AlertProps {
    title: string; // 标题
    description?: string; // 描述
    icon?: JSX.Element; // 图标，使用React元素
    type?: 'info' | 'warning' | 'error' | 'success'; // 类型
    onClose?: () => void; // 关闭函数
}
 
const Alert: FC<AlertProps> = ({
                                   title,
                                   description,
                                   icon,
                                   type = 'info',
                                   onClose
                               }) => {
    const backgroundColor = {
        info: 'bg-tofu-info',
        warning: 'bg-tofu-warning-lightest',
        error: 'bg-tofu-error',
        success: 'bg-tofu-success'
    }[type];
 
    const textColor = {
        info: 'text-tofu-info-lightest',
        warning: 'text-tofu-warning-light',
        error: 'text-tofu-error-lightest',
        success: 'text-tofu-success-lightest'
    }[type];
 
    return (
        <div className={`flex items-center gap-3 border rounded-2xl p-4 ${backgroundColor} ${textColor}`}>
            {icon && <div className="flex-shrink-0">{icon}</div>}
            <div className="flex-grow">
                <div className="font-medium">{title}</div>
                {description && <div>{description}</div>}
            </div>
            {onClose && (
                <button onClick={onClose} className="ml-auto">
                    <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" className="stroke-current">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            )}
        </div>
    );
};
 
export default Alert;

Parameter Descriptions

Parameter	Type	Default	Description
title	string	-	Title of the alert
description	string	-	Description of the alert content
type	'info' \| 'warning' \| 'error' \| 'success'	'info'	Type of alert, defines the background and text color
icon	JSX.Element	-	Optional, custom icon
onClose	() => void	-	Optional, provides a function to be called when the close button is clicked

Tutorial

Simple Alert

Simple Notice

This is a basic alert

<Alert title="Simple Notice" description="This is a basic alert" />

Themed Alert

Success Notice

This is a successful alert

<Alert title="Success Notice" description="This is a successful alert" type="success" />

Icon Alert

Iconic Alert

This is an alert with an icon

import {AlertTriangle} from "lucide-react";
<Alert title="Iconic Alert" description="This is an alert with an icon" icon={<AlertTriangle/>}