---
description: The Alert component wrapper.
---

# Wrapper

{% hint style="info" %}
This is a compound component.
{% endhint %}

### API

This component extends the `animated div component` tag props. This means this component can receive the react-spring native [`animated.div`](https://www.react-spring.dev/docs/concepts/animated-elements) props, for example, the `className` attribute (which is why it's not included in the table).

| Props      | Type                                                        | Required |
| ---------- | ----------------------------------------------------------- | -------- |
| `children` | `ReactNode`                                                 | ✅        |
| `isOpen`   | `boolean`                                                   | :x:      |
| `heading`  | `string`                                                    | :x:      |
| `variant`  | `'info' \| 'warning' \| 'danger' \| 'default'`              | :x:      |
| `icon`     | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/) | :x:      |
| `hideIcon` | `boolean`                                                   | :x:      |

<details>

<summary>children</summary>

The children in this case, because it is a compound component, should be the ones provided by this design system, listed before.

</details>

<details>

<summary>isOpen</summary>

This prop controls the displaying state of the alert

</details>

<details>

<summary>heading</summary>

The heading of the `Alert` component.

</details>

<details>

<summary>variant</summary>

To change the state and style of the alert based on the selection

</details>

<details>

<summary>icon </summary>

Controls the icon to show on the `Alert`.

</details>

<details>

<summary>hideIcon</summary>

To prevent icon to be shown.

</details>
