Toast - React

View on Figma View on GitHub

import { Toast } from '@sky-uk/ui-core';

The Toast components is used to provide feedback to the user that an action has been completed.

Toast when positioned at the bottom of the screen

function Example() {
  const [visible, setVisible] = React.useState(false);

  const handleClick = () => setVisible(!visible);

  return (
    <>
      {visible && (
        <Toast $position="fixed" $bottom="0">
          Here comes the toast!
        </Toast>
      )}
      <Button onClick={handleClick} $margin={4}>
        Show Toast
      </Button>
    </>
  );
}

Toast positioned over another element

function Example() {
  const [visible, setVisible] = React.useState(false);

  const handleClick = () => setVisible(!visible);

  return (
    <>
      <Button onClick={handleClick} $marginBottom={7}>
        Show Toast
      </Button>

      <Box $height="20vh">Some content</Box>

      <Box $position="relative">
        {visible && (
          <Toast $position="absolute" $bottom="80px">
            Here comes the toast!
          </Toast>
        )}
        <Box
          $border
          $bottom="0"
          $bgColor="white"
          $height="80px"
          $padding={4}
          $position="absolute"
          $width="100%"
          $zIndex={200}
        >
          <Flex $alignItems="center" $height="100%" $justifyContent="space-between">
            £65 a month
            <Link>View Basket</Link>
          </Flex>
        </Box>
      </Box>
    </>
  );
}

Props

src

The src requires the content of an svg tag of the icon that you want to render. It is recommended to use icons from the @sky-uk/skycons package. (See Skycons).

function Example() {
  const [visible, setVisible] = React.useState(false);

  const handleClick = () => setVisible(!visible);

  return (
    <>
      {visible && <Toast src={exclamationTriangleLinear}> Look, I have a custom icon! Alert, alert!</Toast>}
      <Button onClick={handleClick} $margin={4}>
        Show Toast
      </Button>
    </>
  );
}

System Modifiers

The Toast component also supports the props applied using the following system modifiers:

position