Info-Label (InfoLabel)

InfoLabel ist eine vielseitige Komponente, die zur Anzeige von Informationen oder Warnmeldungen in verschiedenen Kontexten verwendet wird. Sie nutzt die Flexibilität von TailwindCSS für das Styling und bietet vordefinierte Farbmodi für eine schnelle Anpassung.

Verwendung

Um InfoLabel zu verwenden, importieren Sie es in Ihre Komponente und geben Sie die anzuzeigenden untergeordneten Elemente (children) an. Optional können Sie auch die Eigenschaft mode festlegen, um das Erscheinungsbild je nach Kontext zu ändern (info oder warn).

Einfaches Info-Label

Ein einfaches Beispiel, das zeigt, wie die InfoLabel-Komponente verwendet wird, um eine informative Nachricht anzuzeigen.

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

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

Warn-Label

Veranschaulicht, wie die InfoLabel-Komponente verwendet wird, um eine Warnmeldung anzuzeigen, indem der Modus auf warn gesetzt wird.

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

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