Message

A Message shows and highlights important information.

📦1.55 KB

Overview

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.
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

Success
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Caution
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
Error
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
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="Caution">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et.
</Message>
<Message status="danger" title="Error">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et.
</Message>
</div>
);
}

Alert

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

isAlert adds role="alert" attribute.