Alerta (Alert)

Las Alertas (Alerts) se utilizan para comunicar un estado o dar feedback a los usuarios. A menudo indican éxito, información, advertencias o errores.

Color

La prop color se utiliza para definir el nivel de gravedad de la alerta.

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

Tamaño (Size)

La prop size se utiliza para definir el tamaño de la alerta.

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

Descartable (Dismissable)

Las alertas pueden ser descartables cuando se proporciona la función callback onDismiss.

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

export default function DismissableAlertDemo() {
    const [visible, setVisible] = useState(true);
    return (
        <>
            {visible && (
                <Alert onDismiss={() => setVisible(false)} color="info">
                    This alert can be dismissed with the close button.
                </Alert>
            )}
        </>
    );
}

Botón de acción (Action Button)

Incluye un elemento interactivo dentro de la alerta utilizando la prop action (acción).

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

export default function AlertActionButtonDemo() {
    return (
        <Alert
            color="success"
            action={<Button size="small">Undo</Button>}
        >
            This alert contains an action button.
        </Alert>
    );
}

Estilo personalizado (Custom Styling)

Pasa clases CSS o estilos personalizados con las props className y style para personalizar la alerta.

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

export default function CustomStyleAlertDemo() {
    return (
        <Alert
            outerClassName="custom-class"
            style={{
                borderLeft: "4px solid #4ade80",
                color: "#fff",
                background: "repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px)"
            }}
            color="success"
        >
            This alert has custom styling.
        </Alert>
    );
}