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, { useState } from 'react' import Button from 'playbook-ui' import FixedConfirmationToast from 'playbook-ui' const FixedConfirmationToastMultiLine = (props) => { const [openShort, setOpenShort] = useState(false) const [openLong, setOpenLong] = useState(false) const handleClickShort = () => { setOpenShort(true) } const handleClickLong= () => { setOpenLong(true) } const handleCloseShort = () => { setOpenShort(false) } const handleCloseLong= () => { setOpenLong(false) } return ( <> <Button onClick={handleClickShort} text="Short Multiline" variant="secondary" /> {' '} <Button onClick={handleClickLong} text="Long Multiline" variant="secondary" /> <FixedConfirmationToast closeable horizontal='center' multiLine onClose={handleCloseShort} open={openShort} status='tip' text='Multi-line is used when the given text will not fit on one line.' vertical='top' /> <FixedConfirmationToast closeable horizontal='center' multiLine onClose={handleCloseLong} open={openLong} status='tip' text='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.' vertical='top' /> </> ) } 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
Pass anything (including any of our kits) to the children
prop to customize the content of the fixed confirmation toast.
NOTE: passing children
overrides any content passed to text
import React from 'react' import FixedConfirmationToast from 'playbook-ui' import Button from 'playbook-ui' import Title from 'playbook-ui' const FixedConfirmationToastChildren = (props) => { return ( <> <FixedConfirmationToast paddingY="none" status="success" > <Title dark marginLeft="md" size={4} text="Design & Handoff Process was moved to UX Designer Learning Track." /> <Button dark onClick={() => alert("button clicked!")} paddingRight="none" text="Undo" variant="link" /> </FixedConfirmationToast> </> ) } export default FixedConfirmationToastChildren
import React from 'react' import FixedConfirmationToast from 'playbook-ui' const FixedConfirmationToastCustomIcon = (props) => { return ( <div> <div> <FixedConfirmationToast closeable icon="wrench" marginBottom="md" status="error" text="Fix before proceeding" /> </div> <div> <FixedConfirmationToast icon="star" marginBottom="md" status="success" text="Thank you for completing the form!" /> </div> <div> <FixedConfirmationToast icon="file-pdf" marginBottom="md" status="neutral" text="Saved as PDF" /> </div> <div> <FixedConfirmationToast icon="arrow-down" status="tip" text="New Messages" /> </div> </div> ) } export default FixedConfirmationToastCustomIcon