Fixed Confirmation Toast

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.

Summary

Uses Icons

Javascript Enhanced

Default

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

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

Click to Close

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

Click to Show Positions

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

Click to Show Auto Close

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

Children

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

Custom Icon

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

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat