Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
import React from 'react' import FixedConfirmationToast from 'playbook-ui' const FixedConfirmationToastDefault = (props) => { return ( <div> <div> <FixedConfirmationToast closeable status="error" text="Error Message" /> </div> <br /> <div> <FixedConfirmationToast status="success" text="Items Successfully Moved" /> </div> <br /> <div> <FixedConfirmationToast status="neutral" text="Scan to Assign Selected Items" /> </div> </div> ) } export default FixedConfirmationToastDefault
Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.
import React from 'react' import FixedConfirmationToast from 'playbook-ui' const FixedConfirmationToastMultiLine = (props) => { return ( <div> <FixedConfirmationToast multiLine status="tip" text="Scan to Assign Selected Items. Click here to generate report" /> </div> ) } export default FixedConfirmationToastMultiLine
import React from 'react' import FixedConfirmationToast from 'playbook-ui' const FixedConfirmationToastClose = (props) => { return ( <div> <div> <FixedConfirmationToast closeable status="error" text="Error Message" /> </div> <br /> <div> <FixedConfirmationToast closeable status="success" text="Items Successfully Moved" /> </div> <br /> <div> <FixedConfirmationToast closeable status="neutral" text="Scan to Assign Selected Items" /> </div> </div> ) } export default FixedConfirmationToastClose
import React, { useState } from 'react' import Button from 'playbook-ui' import FixedConfirmationToast from 'playbook-ui' const FixedConfirmationToastPositions = (props) => { const [state, setState] = useState({ open: false, vertical: 'top', horizontal: 'center', }) const { vertical, horizontal, open } = state const handleClick = (newState) => () => { setState({ open: true, ...newState }) } const handleClose = () => { setState({ ...state, open: false }) } return ( <div> <Button onClick={handleClick({ horizontal: 'center', open: true, vertical: 'top', })} text="Top Center" variant="secondary" /> {' '} <Button onClick={handleClick({ horizontal: 'left', open: true, vertical: 'top', })} text="Top Left" variant="secondary" /> {' '} <Button onClick={handleClick({ horizontal: 'right', open: true, vertical: 'top', })} text="Top Right" variant="secondary" /> {' '} <Button onClick={handleClick({ horizontal: 'center', open: true, vertical: 'bottom', })} text="Bottom Center" variant="secondary" /> {' '} <Button onClick={handleClick({ horizontal: 'left', open: true, vertical: 'bottom', })} text="Bottom Left" variant="secondary" /> {' '} <Button onClick={handleClick({ horizontal: 'right', open: true, vertical: 'bottom', })} text="Bottom Right" variant="secondary" /> <FixedConfirmationToast closeable horizontal={horizontal} onClose={handleClose} open={open} status="neutral" text={`${vertical} ${horizontal}`} vertical={vertical} /> </div> ) } export default FixedConfirmationToastPositions
Auto close is used when you want the confirmation toast to close automatically after a certain time. autoClose
property will be a delay number in ms.
import React, { useState } from 'react' import Button from 'playbook-ui' import FixedConfirmationToast from 'playbook-ui' const FixedConfirmationToastAutoClose = (props) => { const [open, setOpen] = useState(false) const [openCloseable, setOpenCloseable] = useState(false) const handleClick = () => { setOpen(true) } const handleClickCloseable = () => { setOpenCloseable(true) } const handleClose = () => { setOpen(false) } const handleCloseCloseable = () => { setOpenCloseable(false) } return ( <> <Button onClick={handleClick} text="Show Auto Close Toast" variant="secondary" /> {' '} <Button onClick={handleClickCloseable} text="Show Closeable Auto Close Toast" variant="secondary" /> <FixedConfirmationToast autoClose={3000} horizontal='center' onClose={handleClose} open={open} status='tip' text='I will disappear in 3 seconds.' vertical='top' /> <FixedConfirmationToast autoClose={10000} closeable horizontal='center' onClose={handleCloseCloseable} open={openCloseable} status='tip' text='I will disappear in 10 seconds.' vertical='top' /> </> ) } export default FixedConfirmationToastAutoClose