Etiqueta de información (InfoLabel)

InfoLabel (Etiqueta de información) es un componente versátil que se utiliza para mostrar información o mensajes de advertencia en diferentes contextos. Aprovecha la flexibilidad de TailwindCSS para el estilo, ofreciendo modos de color predefinidos para una personalización rápida.

Uso

Para usar InfoLabel, impórtalo en tu componente y especifica los elementos secundarios (children) que se mostrarán dentro de él. Opcionalmente, también puedes establecer la prop mode (modo) para cambiar la apariencia según el contexto (info o warn).

Etiqueta de información básica

Un ejemplo básico que muestra cómo usar el componente InfoLabel para mostrar un mensaje informativo.

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

export default function InfoLabelBasicDemo() {
    return (
        <InfoLabel mode="info">
            This is an informational message.
        </InfoLabel>
    );
}

Etiqueta de advertencia

Ilustrando cómo utilizar el componente InfoLabel para mostrar un mensaje de advertencia estableciendo el modo en warn (advertencia).

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

export default function InfoLabelWarnDemo() {
    return (
        <InfoLabel mode="warn">
            Warning: This is a warning message.
        </InfoLabel>
    );
}