Code

Props

Props	Data Type	Required
message	string	✅
type	string (Default, Info, Success, Warning, Danger)	❌
position	string (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right)	❌

How to Use

To work with Toast component, it is going to be necessary to import two elements from the NPM package:

• toastTrigger (The function that receives the props and displays the Toast component)

• Toast (The component itself that renders the message).

Beside that, Toast component needs of a trigger that executes the toastTrigger function.

In this example it is going to be used a Button as a trigger in a react component.

import {Button, Toast, toastTrigger} from "@2600hz/sds-...-components"

const Component = ()=>{

const showToast = ()=>{
    toastTrigger("message", "type")
    }
    
    return (
        <Toast />
        <Button content="Display Toast" type="Base" onClick={showToast} />
    )
}

Live Demo

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

React

General Components / Toast - Toast ⋅ Storybooksipster-react-component-storybook.netlify.app