Code

Props

Props	Data Type	Required
children	strin-HTML tags -Custom Components (MenuOption, MenuHeader and MenuDivider)	✅
className	string	❌
title	string	❌
type	string (Info, Warning, Danger)	❌
show	boolean	❌
commland	boolean	❌

commland prop is used to adjust the Alert component to the Commland UI-Shell automatically.

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.

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.

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.

Props	Data Type	Required
children	-HTML tags -Custom Components (MenuOption, MenuHeader and MenuDivider)	✅

AlertFooter

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

Props	Data Type	Required
children	SDS Buttons Component	✅

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.

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.

Example

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

• Button

Live Demo

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

React

Storybook