InfoLabel
InfoLabel is a versatile component used to display information or warning messages in different contexts. It leverages the flexibility of TailwindCSS for styling, offering predefined color modes for quick customization.
Usage
To use InfoLabel
, import it into your component and specify the children
to display inside it. Optionally, you can also set the mode
prop to change the appearance based on the context (info
or warn
).
Basic Info Label
A basic example showing how to use the InfoLabel component to display an informational message.
import React from "react";
import { InfoLabel } from "@firecms/ui";
export default function InfoLabelBasicDemo() {
return (
<InfoLabel mode="info">
This is an informational message.
</InfoLabel>
);
}
Warning Label
Illustrating how to use the InfoLabel component to display a warning message by setting the mode to warn
.
import React from "react";
import { InfoLabel } from "@firecms/ui";
export default function InfoLabelWarnDemo() {
return (
<InfoLabel mode="warn">
Warning: This is a warning message.
</InfoLabel>
);
}