Message component is used to display inline messages.
import { Message } from 'primereact/message';<Message>
<Message.Content>
<Message.Text>Message</Message.Text>
</Message.Content>
</Message>import { Message } from 'primereact/message';
export default function BasicDemo() {
return (
<div className="card">
<Message>
<Message.Content>
<Message.Text>Message Content</Message.Text>
</Message.Content>
</Message>
</div>
);
}The severity option specifies the type of the message.
import { Message } from 'primereact/message';
export default function SeverityDemo() {
return (
<div className="card flex items-center justify-center gap-4">
<Message severity="success">
<Message.Content>
<Message.Text>Success Message</Message.Text>
</Message.Content>
</Message>
<Message severity="info">
<Message.Content>
<Message.Text>Info Message</Message.Text>
</Message.Content>
</Message>
<Message severity="warn">
<Message.Content>
<Message.Text>Warn Message</Message.Text>
</Message.Content>
</Message>
<Message severity="error">
<Message.Content>
<Message.Text>Error Message</Message.Text>
</Message.Content>
</Message>
<Message severity="secondary">
<Message.Content>
<Message.Text>Secondary Message</Message.Text>
</Message.Content>
</Message>
<Message severity="contrast">
<Message.Content>
<Message.Text>Contrast Message</Message.Text>
</Message.Content>
</Message>
</div>
);
}Message.Icon is used to display an icon.
import { Avatar } from 'primereact/avatar';
import { Message } from 'primereact/message';
export default function IconDemo() {
return (
<div className="card flex justify-center gap-4">
<Message severity="info">
<Message.Content>
<Message.Icon className="pi pi-info-circle" />
<Message.Text>Info Message</Message.Text>
</Message.Content>
</Message>
<Message severity="success">
<Message.Content>
<Message.Icon asChild>
<Avatar shape="circle">
<Avatar.Image src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" />
</Avatar>
</Message.Icon>
<Message.Text>How may I help you?</Message.Text>
</Message.Content>
</Message>
</div>
);
}Configure the variant value as outlined or simple.
import { Message } from 'primereact/message';
export default function VariantDemo() {
return (
<div className="card space-y-8">
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-2">Outlined</h3>
<div className="flex items-center gap-4">
<Message severity="success" variant="outlined">
<Message.Content>
<Message.Text>Success Message</Message.Text>
</Message.Content>
</Message>
<Message severity="info" variant="outlined">
<Message.Content>
<Message.Text>Info Message</Message.Text>
</Message.Content>
</Message>
<Message severity="warn" variant="outlined">
<Message.Content>
<Message.Text>Warn Message</Message.Text>
</Message.Content>
</Message>
<Message severity="error" variant="outlined">
<Message.Content>
<Message.Text>Error Message</Message.Text>
</Message.Content>
</Message>
<Message severity="secondary" variant="outlined">
<Message.Content>
<Message.Text>Secondary Message</Message.Text>
</Message.Content>
</Message>
<Message severity="contrast" variant="outlined">
<Message.Content>
<Message.Text>Contrast Message</Message.Text>
</Message.Content>
</Message>
</div>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-2">Simple</h3>
<div className="flex items-center gap-4">
<Message severity="success" variant="simple">
<Message.Content>
<Message.Text>Success Message</Message.Text>
</Message.Content>
</Message>
<Message severity="info" variant="simple">
<Message.Content>
<Message.Text>Info Message</Message.Text>
</Message.Content>
</Message>
<Message severity="warn" variant="simple">
<Message.Content>
<Message.Text>Warn Message</Message.Text>
</Message.Content>
</Message>
<Message severity="error" variant="simple">
<Message.Content>
<Message.Text>Error Message</Message.Text>
</Message.Content>
</Message>
<Message severity="secondary" variant="simple">
<Message.Content>
<Message.Text>Secondary Message</Message.Text>
</Message.Content>
</Message>
<Message severity="contrast" variant="simple">
<Message.Content>
<Message.Text>Contrast Message</Message.Text>
</Message.Content>
</Message>
</div>
</div>
</div>
);
}Message provides small and large sizes as alternatives to the base.
import { Message } from 'primereact/message';
export default function SizesDemo() {
return (
<div className="card flex flex-col items-center gap-4">
<Message size="small">
<Message.Content>
<Message.Icon className="pi pi-send" />
<Message.Text>Small Message</Message.Text>
</Message.Content>
</Message>
<Message>
<Message.Content>
<Message.Icon className="pi pi-send" />
<Message.Text>Normal Message</Message.Text>
</Message.Content>
</Message>
<Message size="large">
<Message.Content>
<Message.Icon className="pi pi-send" />
<Message.Text>Large Message</Message.Text>
</Message.Content>
</Message>
</div>
);
}Multiple messages can be displayed.
import { MessageProps } from '@primereact/types/shared/message';
import { Button } from 'primereact/button';
import { Message } from 'primereact/message';
import * as React from 'react';
export default function DynamicDemo() {
const [messages, setMessages] = React.useState<MessageProps[]>([]);
const addMessages = () => {
setMessages([
{ severity: 'info', content: 'Dynamic Info Message' },
{ severity: 'success', content: 'Dynamic Success Message' },
{ severity: 'warn', content: 'Dynamic Warn Message' }
]);
};
const clearMessages = () => {
setMessages([]);
};
return (
<div className="card flex flex-col items-center justify-center gap-4">
<div className="flex gap-2">
<Button onClick={addMessages}>Add Messages</Button>
<Button severity="secondary" onClick={clearMessages}>
Clear Messages
</Button>
</div>
{messages.map((item, index) => (
<Message key={index} severity={item.severity}>
<Message.Content>
<Message.Text>{item.content}</Message.Text>
</Message.Content>
</Message>
))}
</div>
);
}Message.Close is a triggerable element used to close the message.
import { Message } from 'primereact/message';
export default function ClosableDemo() {
return (
<div className="card">
<Message>
<Message.Content>
<Message.Text>This is a closable message.</Message.Text>
<Message.Close />
</Message.Content>
</Message>
</div>
);
}Messages can disappear automatically by defined the life in milliseconds.
import { Button } from 'primereact/button';
import { Message } from 'primereact/message';
import * as React from 'react';
export default function LifeDemo() {
const [visible, setVisible] = React.useState(false);
return (
<div className="card flex flex-col items-center justify-center gap-4">
<Button disabled={visible} onClick={() => setVisible(true)}>
Show Message
</Button>
{visible && (
<Message life={3000} severity="success" onClose={() => setVisible(false)}>
<Message.Content>
<Message.Text>Auto Disappear Message</Message.Text>
</Message.Content>
</Message>
)}
</div>
);
}Message component uses alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Since any attribute is passed to the root element, attributes like aria-labelledby and aria-label can optionally be used as well.
Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may use closeButtonProps to customize the element and override the default aria-label.
| Key | Function |
|---|---|
enter | Closes the message. |
space | Closes the message. |