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

Select background colour

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>
    </>
  );
}

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

Select background colour

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>
    </>
  );
}

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).

Select background colour

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>
    </>
  );
}

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