> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/components/typography/message.md).

# Message

This component is used to show information messages to user

This component is very useful when you want to show any information for user. It can be warning or precaution against potentially dangerous actions. Also you can set a custom icon for the message if it necessary. 

```tsx
import { Message, Role } from 'altrone-ui';

return <Message
 title="It's a danger!"
 role={Role.danger}
>
    Please, be careful!
</Message>
```

## Properties

| Property                                              | Type                                                | Description                                                    |
| ----------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------------------- |
| **`children`**<mark style="color:red;">**`*`**</mark> | `ReactNode`                                         | Content of your message                                        |
| **`title`**                                           | `string`                                            | Title of the message                                           |
| **`role`**                                            | [`Role`](/altrone-ui/utils/enums/role.md)           | Role. Changes a background and foreground color of the message |
| **`IconComponent`**                                   | `JSX.Element`                                       | Icon                                                           |
| **`className`**                                       | `string`                                            | Custom CSS class                                               |
| **`elevation`**                                       | [`Elevation`](/altrone-ui/utils/enums/elevation.md) | Shadows of your message.                                       |

## History

* **`Altrone 2.0`**: added `elevation` prop
* **`Altrone 1.0`**: initial release