Alert

Le composant Alert est utilisé pour afficher des messages importants aux utilisateurs dans votre interface. Les alerts peuvent communiquer des informations, des avertissements, des erreurs ou des confirmations.

Utilisation

Importez Alert depuis @firecms/ui et fournissez un type (info, warning, error, success) et le contenu.

Alert de base

Un exemple basique d’alert avec le message minimal.

import React from "react";
import { Alert } from "@firecms/ui";

export default function AlertColorDemo() {
    return (
        <div className="space-y-4 w-full">
            <Alert color={"base"}>
                This is a simple alert.
            </Alert>
            <Alert color="error">
                This is an error alert.
            </Alert>
            <Alert color="warning">
                This is a warning alert.
            </Alert>
            <Alert color="info">
                This is an info alert.
            </Alert>
            <Alert color="success">
                This is a success alert.
            </Alert>
        </div>
    );
}

Types d’alert

Différents types d’alerts pour l’information, l’avertissement, l’erreur et le succès.

import React from "react";
import { Alert } from "@firecms/ui";

export default function AlertSieDemo() {
    return (
        <div className="w-full space-y-4">
            <Alert size="small">
                This is an small alert.
            </Alert>
            <Alert size="medium">
                This is a medium alert.
            </Alert>
            <Alert size="large">
                This is a large alert.
            </Alert>
        </div>
    );
}