---
title: "Toast — React"
canonical: https://sky-ui.cf.sky.com/components/toast/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Toast — React

Toast provides brief feedback about an operation through a message at the bottom of the screen.

```js
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

```tsx
  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

```tsx
  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)](/guides/skycons).

```tsx
  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](/core/system/position/)