# System Message

A system message is generated by backend events (for example, banning or muting a user). The SDK renders them automatically in [`VirtualizedMessageList`](/chat/docs/sdk/react/components/core-components/virtualized-list/) and [`MessageList`](/chat/docs/sdk/react/components/core-components/message-list/). This guide shows how to override the default component.

## Best Practices

- Keep system messages visually distinct but not disruptive.
- Preserve the message text and timestamp for audit clarity.
- Avoid exposing sensitive actor details unless your policy allows it.
- Use `MessageSystem` override for layout changes, not just styling.
- Test system messages for moderation events and permission changes.

### Default System Message Component

The default system message component is [`EventComponent`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx). It renders when `message.type === "system"`.

![Default System Message](@chat-sdk/react/v14-latest/_assets/default-system-message.png)

### Custom System Message Component

Our custom component shows the message text, date, and actor (user who triggered the event). Register it with `WithComponents` so the nested `MessageList` or `VirtualizedMessageList` can read it from [`ComponentContext`](/chat/docs/sdk/react/components/contexts/component-context/).

<admonition type="note">

To see your component in action, try muting a user with the `/mute` command followed by an `@mention`. These commands must be enabled in the [Dashboard](https://dashboard.getstream.io/).

</admonition>

<Tabs>

</Tabs>

![Custom System Message](@chat-sdk/react/v14-latest/_assets/custom-system-message.png)


---

This page was last updated at 2026-05-22T16:32:13.813Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/guides/customization/system-message/](https://getstream.io/chat/docs/sdk/react/guides/customization/system-message/).