---
id: system_message
sidebar_position: 8
title: System Message
---

import CustomSystemMessage from '../../assets/CustomSystemMessage.png';
import SystemMessage from '../../assets/SystemMessage.png';

A system message is a message generated by a system event, such as updating the channel or muting a user. These are sent from the backend and displayed via the `VirtualizedMessageList` and `MessageList` components automatically.
In this guide, we will override the default component with a custom one.

### The Default System Message Component

For reference, the default system message component, [`EventComponent`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EventComponent/EventComponent.tsx) (image below) is very simple and displays all pertinent information about the event that occurred.

<img src={SystemMessage} alt='Default System Message for Chat' width='700' />

The two list components display these messages only if `message.type === 'system'`. This component receives the `message` object and `Avatar` component as props. The necessary event information is destructured from the `message` object.

```jsx
const { created_at = '', event, text, type } = message;
```

### Custom System Message Component

Our custom component will display the message text, date, and the actor (user who triggered the event) with added styling. For this complete override of the default component, we will utilize the `MessageSystem` prop on `Channel`. This adds our custom component to the `ComponentContext` where it
is then pulled for use in the lists when needed.

:::tip
To see your custom component in action, try muting a user by using the '/' command. For example, type '/mute' followed by a user mention, '@'. These commands must be enabled in the Dashboard.
:::

```css
.custom-system-message {
  padding: 5px;
  margin-top: 5px;
  align-items: center;
  display: flex;
  flex-direction: column;
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    left,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  ); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(
    right,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  ); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(
    right,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  ); /* For Firefox 3.6 to 15 */
  background: linear-gradient(
    to right,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet
  ); /* Standard syntax (must be last) */
}
```

```jsx
const CustomSystemMessage = (props: EventComponentProps) => {
  const { Avatar = DefaultAvatar, message } = props;

  const { created_at = '', text, type, user } = message;
  const date = created_at.toString();

  if (type === 'system') {
    return (
      <div className='custom-system-message'>
        <span>
          Event: {text} at {date}
        </span>
        <span>
          Actor: <Avatar image={user?.image} shape={'square'} size={20} />
          {user?.name}
        </span>
      </div>
    );
  }

  return null;
};

const App = () => (
  <Chat client={chatClient}>
    <ChannelList />
    <Channel MessageSystem={CustomSystemMessage}>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);
```

### The Result:

<img src={CustomSystemMessage} alt='Custom System Message in the Message List' width='800' />
