> 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 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