Message
Message component is used to display inline messages.
Upgrade now and save %5.
basic-demo
Usage#
import { Message } from '@primereact/ui/message';<Message>
<Message.Content>
<Message.Text>Message</Message.Text>
</Message.Content>
</Message>Examples#
Severity#
The severity option specifies the type of the message.
severity-demo
import { Message } from '@primereact/ui/message';
export default function SeverityDemo() {
return (
<div className="max-w-md mx-auto space-y-4">
<Message.Root severity="success">
<Message.Content>
<Message.Icon className="pi pi-check" />
<Message.Text>Your account is now ready.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="info">
<Message.Content>
<Message.Icon className="pi pi-sparkles" />
<Message.Text>
<a href="" className=" decoration-1! underline!">
Upgrade
</a>{' '}
now and save %5.
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="warn">
<Message.Content>
<Message.Icon className="pi pi-receipt" />
<Message.Text>
Your subscription is about to expire.{' '}
<a href="" className=" decoration-1! underline!">
Renew
</a>
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="error">
<Message.Content>
<Message.Icon className="pi pi-exclamation-triangle" />
<Message.Text>
Something went wrong. Please{' '}
<a href="" className=" decoration-1! underline!">
try again
</a>
.
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="secondary">
<Message.Content>
<Message.Icon className="pi pi-spinner animate-spin" />
<Message.Text>Processing may take a few moments.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="contrast">
<Message.Content>
<Message.Icon className="pi pi-wifi" />
<Message.Text>You’re currently in offline mode.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
</div>
);
}
Icon#
Message.Icon is used to display an icon.
Your subscription is about to expire. Renew
How may I help you?
icon-demo
import { Avatar } from '@primereact/ui/avatar';
import { Message } from '@primereact/ui/message';
export default function IconDemo() {
return (
<div className="max-w-sm mx-auto space-y-4">
<Message.Root severity="warn">
<Message.Content>
<Message.Icon className="pi pi-receipt" />
<Message.Text>
Your subscription is about to expire.{' '}
<a href="" className=" decoration-1! underline!">
Renew
</a>
</Message.Text>
</Message.Content>
</Message.Root>
<Message.Root severity="info">
<Message.Content>
<Message.Icon asChild>
<Avatar.Root shape="circle">
<Avatar.Image src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" />
</Avatar.Root>
</Message.Icon>
<Message.Text>How may I help you?</Message.Text>
</Message.Content>
</Message.Root>
</div>
);
}
Variant#
Configure the variant value as outlined or simple.
variant-demo
import { Message } from '@primereact/ui/message';
export default function VariantDemo() {
return (
<div className="space-y-8 max-w-sm mx-auto">
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-2">Outlined</h3>
<Message.Root severity="success" variant="outlined">
<Message.Content>
<Message.Icon className="pi pi-check" />
<Message.Text>Your account is now ready.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="info" variant="outlined">
<Message.Content>
<Message.Icon className="pi pi-sparkles" />
<Message.Text>
<a href="" className=" decoration-1! underline!">
Upgrade
</a>{' '}
now and save %5.
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="warn" variant="outlined">
<Message.Content>
<Message.Icon className="pi pi-receipt" />
<Message.Text>
Your subscription is about to expire.{' '}
<a href="" className=" decoration-1! underline!">
Renew
</a>
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="error" variant="outlined">
<Message.Content>
<Message.Icon className="pi pi-exclamation-triangle" />
<Message.Text>
Something went wrong. Please{' '}
<a href="" className=" decoration-1! underline!">
try again
</a>
.
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="secondary" variant="outlined">
<Message.Content>
<Message.Icon className="pi pi-spinner animate-spin" />
<Message.Text>Processing may take a few moments.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="contrast" variant="outlined">
<Message.Content>
<Message.Icon className="pi pi-wifi" />
<Message.Text>You’re currently in offline mode.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
</div>
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-2">Simple</h3>
<Message.Root severity="success" variant="simple">
<Message.Content>
<Message.Icon className="pi pi-check" />
<Message.Text>Your account is now ready.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="info" variant="simple">
<Message.Content>
<Message.Icon className="pi pi-sparkles" />
<Message.Text>
<a href="" className=" decoration-1! underline!">
Upgrade
</a>{' '}
now and save %5.
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="warn" variant="simple">
<Message.Content>
<Message.Icon className="pi pi-receipt" />
<Message.Text>
Your subscription is about to expire.{' '}
<a href="" className=" decoration-1! underline!">
Renew
</a>
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="error" variant="simple">
<Message.Content>
<Message.Icon className="pi pi-exclamation-triangle" />
<Message.Text>
Something went wrong. Please{' '}
<a href="" className=" decoration-1! underline!">
try again
</a>
.
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="secondary" variant="simple">
<Message.Content>
<Message.Icon className="pi pi-spinner animate-spin" />
<Message.Text>Processing may take a few moments.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="contrast" variant="simple">
<Message.Content>
<Message.Icon className="pi pi-wifi" />
<Message.Text>You’re currently in offline mode.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
</div>
</div>
);
}
Sizes#
Message provides small and large sizes as alternatives to the base.
import { Message } from '@primereact/ui/message';
export default function SizesDemo() {
return (
<div className="flex flex-col items-center gap-4">
<Message.Root severity="info" size="small">
<Message.Content>
<Message.Icon className="pi pi-sparkles" />
<Message.Text>
<a href="" className=" decoration-1! underline!">
Upgrade
</a>{' '}
now and save %5.
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="info">
<Message.Content>
<Message.Icon className="pi pi-sparkles" />
<Message.Text>
<a href="" className=" decoration-1! underline!">
Upgrade
</a>{' '}
now and save %5.
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
<Message.Root severity="info" size="large">
<Message.Content>
<Message.Icon className="pi pi-sparkles" />
<Message.Text>
<a href="" className=" decoration-1! underline!">
Upgrade
</a>{' '}
now and save %5.
</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
</div>
);
}
Dynamic#
Multiple messages can be displayed.
dynamic-demo
'use client';
import { MessageProps } from '@primereact/types/shared/message';
import { Button } from '@primereact/ui/button';
import { Message } from '@primereact/ui/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="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.Root key={index} severity={item.severity}>
<Message.Content>
<Message.Text>{item.content}</Message.Text>
</Message.Content>
</Message.Root>
))}
</div>
);
}
Closable#
Message.Close is a triggerable element used to close the message.
This is a closable message.
closable-demo
import { Message } from '@primereact/ui/message';
export default function ClosableDemo() {
return (
<div className="max-w-xs mx-auto">
<Message.Root>
<Message.Content>
<Message.Text>This is a closable message.</Message.Text>
<Message.Close />
</Message.Content>
</Message.Root>
</div>
);
}
Life#
Messages can disappear automatically by defined the life in milliseconds.
life-demo
'use client';
import { Button } from '@primereact/ui/button';
import { Message } from '@primereact/ui/message';
import * as React from 'react';
export default function LifeDemo() {
const [visible, setVisible] = React.useState(false);
return (
<div className="flex flex-col items-center justify-center gap-4">
<Button disabled={visible} onClick={() => setVisible(true)}>
Show Message
</Button>
{visible && (
<Message.Root life={3000} severity="success" onClose={() => setVisible(false)}>
<Message.Content>
<Message.Icon className="pi pi-check" />
<Message.Text>Your account is now ready.</Message.Text>
</Message.Content>
</Message.Root>
)}
</div>
);
}
Accessibility#
Screen Reader#
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. The closeButtonProps can be used to customize the element and override the default aria-label.
Close Button Keyboard Support#
| Key | Function |
|---|---|
enter | Closes the message. |
space | Closes the message. |