# Code

## Props

<table><thead><tr><th width="163.7588075896112">Props</th><th width="414.7376821119017">Data Type</th><th>Required</th></tr></thead><tbody><tr><td>children</td><td>strin-HTML tags<br>-Custom Components<br><em>(MenuOption, MenuHeader and MenuDivider)</em></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td>className</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>title</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>type</td><td><p>string</p><p>(Info, Warning, Danger)</p></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>show</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>commland</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

{% hint style="info" %}
commland prop is used to adjust the Alert component to the Commland UI-Shell automatically.
{% endhint %}

### Where to Insert This Component in Comm.land?

This component should overlay all the content inside the application. To keep a better order and avoiding problems with UI Shell, it is recommended inserting this component outside and next to the AppPage component. If it is inserted inside the AppPageContent component, the modal is not going to render correctly.

{% hint style="info" %}
For a general usage, outside Comm.land and the UI Shell, the Alert component is recommended to be inserted either at the beginning or at the end of the react component where it is going to be used.
{% endhint %}

### Children

To generate the structure required for the component, the developer can insert the following components as children elements:

#### AlertBody

In here, developer can insert all the HTML tags and Components needed.

<table><thead><tr><th width="163.7588075896112">Props</th><th width="414.7376821119017">Data Type</th><th>Required</th></tr></thead><tbody><tr><td>children</td><td>-HTML tags<br>-Custom Components<br><em>(MenuOption, MenuHeader and MenuDivider)</em></td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr></tbody></table>

#### AlertFooter

This section is designed specifically to be used with the Button Component in the default size.

<table><thead><tr><th width="163.7588075896112">Props</th><th>Data Type</th><th>Required</th></tr></thead><tbody><tr><td>children</td><td>SDS Buttons Component</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr></tbody></table>

{% hint style="info" %}
The show and hide feature of the Alert Component is not included in this component by default. To execute this action, developers need to attach the function to the buttons inside the modal footer.
{% endhint %}

{% hint style="info" %}
Because of design and functionality reasons, the only way to close an Alert Component is by using the buttons in the AlertFooter. It is not possible to exit by clicking in the overlay background or pressing the Esc key like in the Modal component.
{% endhint %}

### Example

```tsx
import React, {useState} from 'react';
import {
    Alert, 
    AlertBody, 
    AlertFooter, 
    Text, 
    Button
} from '@2600hz/sds-react-components';

const Example = ()=>{
    //STATE
    const [show, setShow] = useState(false);
    
    //ACTIONS
    const openAlert = ()=>{
        setShow(true);
    }
    
    const closeAlert = ()=>{
        setShow(false);
    }
    
    const customFunction = ()=>{
        console.log('It Does Something...');
        closeAlert();
    }
    
    //CONTENT
    return(
        <>
            <Alert 
                className='AlertExample' 
                title='Lorem Ipsum Dolore' 
                type='Info'
                show={show}
            >
                <AlertBody>
                    <Text.p>Some random text.</Text.p>
                </AlertBody>
                <AlertFooter>
                    <Button 
                        type='Ghost' 
                        onClick={closeAlert}
                    >Cancel</Button>
                    <Button 
                        type='Primary' 
                        onClick={customFunction}
                    >Primary Action</Button>
                </AlertFooter>
            </Alert>
            <Button onClick={openAlert} >Opening Alert Trigger</Button>
        </>
    )
}

export default Example;
```

## Components Dependency

For this component elaboration, the following internal components were used:

* AlertBody
* AlertFooter
* [Telicon](/sds/sds-components/simple-components/telicon.md)
* [Button](/sds/sds-components/simple-components/button.md)

## Live Demo <a href="#live-demo" id="live-demo"></a>

For detailed code usage documentation, see the Storybooks for each framework below.​

### React <a href="#react" id="react"></a>

{% embed url="<https://sipster-react-component-storybook.netlify.app/?path=%2Fstory%2Fgeneral-components-alert--alert>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-components/simple-components/alert/code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.