Message

A Message shows and highlights important information.

Usage

import { Message } from "@camome/core/Message";
export default function Default() {
return (
<Message title="This is a title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam.
</Message>
);
}

Variants

import { Message } from "@camome/core/Message";
import styles from "./styles.module.scss";
export default function Variant() {
return (
<div className={styles.variant__container}>
<Message status="success" title="Success">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et.
</Message>
<Message status="info" title="Info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et.
</Message>
<Message status="warn" title="Warn">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et.
</Message>
<Message status="danger" title="Danger">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et.
</Message>
</div>
);
}

Alert

import { Message } from "@camome/core/Message";
export default function Alert() {
return <Message title="This is an alert message" isAlert />;
}
Alert.parameters = {
layout: "padded",
};

isAlert adds role="alert" attribute.