Message

An unstyled message component for displaying inline notifications with close and auto-dismiss support.

Build fully custom inline messages with complete control over layout and styling.

Upgrade now and save 5%.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Message with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with five sub-components: Root, Content, Icon, Text, Close
Auto-close with configurable life duration
Close callback on dismissal

Usage#

import { Message } from 'primereact/message';

<Message.Root>
    <Message.Content>
        <Message.Icon />
        <Message.Text></Message.Text>
        <Message.Close />
    </Message.Content>
</Message.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Message.Root as="section"></Message.Root>
<Message.Text as="span"></Message.Text>

Default elements: Root=div, Content=div, Icon=span, Text=p, Close=button.

Render Function Children#

Sub-components accept a render function as children, providing access to the component instance.

<Message.Text>{(instance) => <span>{instance.message?.state.visible ? 'Visible' : 'Hidden'}</span>}</Message.Text>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Upgrade now and save %5.

/* Select a part to see its CSS selector for custom styling */

API#

MessageRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MessageRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MessageRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`MessageRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MessageRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: MessageRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`life`	`number`	—
Delay in milliseconds to close the message automatically.
`onClose`	`() => void`	—
Callback to invoke when the message is closed.
`severity`	`"secondary"` \| `"info"` \| `"success"` \| `"warn"` \| `"contrast"` \| `"error"`	`info`
Severity level of the message.
`variant`	`"outlined"` \| `"simple"`	`undefined`
Specifies the variant of the component.
`size`	`"small"` \| `"large"`	—
Defines the size of the component.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"message"`
`data-part`	`"root"`

Defines passthrough(pt) options of Message component.

label	type	description
root	MessageRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
content	MessageRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
icon	MessageRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the icon's DOM element.
text	MessageRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the text's DOM element.
close	MessageRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the close's DOM element.

MessageContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MessageContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MessageContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`MessageContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MessageContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: MessageContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"message"`
`data-part`	`"content"`

Defines passthrough(pt) options of MessageContent component.

label	type	description
root	MessageContentPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

MessageIcon#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MessageIconInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MessageIconInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`MessageIconInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MessageIconPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: MessageIconInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"message"`
`data-part`	`"icon"`

Defines passthrough(pt) options of MessageIcon component.

label	type	description
root	MessageIconPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

MessageText#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MessageTextInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MessageTextInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`MessageTextInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MessageTextPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: MessageTextInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"message"`
`data-part`	`"text"`

Defines passthrough(pt) options of MessageText component.

label	type	description
root	MessageTextPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

MessageClose#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: MessageCloseInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: MessageCloseInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`MessageCloseInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<MessageClosePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: MessageCloseInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"message"`
`data-part`	`"close"`

Defines passthrough(pt) options of MessageClose component.

label	type	description
root	MessageClosePassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Message uses the alert role which implicitly sets aria-live="assertive" and aria-atomic="true", ensuring the message content is announced immediately by screen readers. The close button is a native <button> element — provide an aria-label for accessible labeling.

Keyboard Support#

Key	Function
`tab`	Moves focus to the close button.
`enter`	Closes the message.
`space`	Closes the message.