Toast

View source on GitHub

Toasts can educate people on the content of the screen, provide confirmation when people complete an action, or simply communicate a short message.

The Toast component is purely visual. In order to properly handle the showing and dismissing of Toasts, as well as any animations, you will need to implement a Toast manager.

Props

Name	Type	Default
`button`	`React.Node`	-
`color`	`"white" \| "red"`	-
`text`	`string \| React.Node`	-
	Use string for guide toasts (one line of text) and React.Node for confirmation toasts (complex text, potentially containing a Link). Avoid specifying a Text color within this property, as the color is automatically determined based on the background color
`thumbnail`	`React.Node`	-
`thumbnailShape`	`"circle" \| "rectangle" \| "square"`	`"square"`

Usage guidelines

When to Use

Displaying non-critical feedback on the result of an action.
Reinforcing success at the surface level.

When Not to Use

Providing an update related to anything other than confirmation of a successful action. Consider a Callout instead.
Presenting mandatory and/or critical actions to a user.
Displaying feedback at the element level (e.g., password inputted doesn't meet requirements). Use inline text instead.

Example: Simple Text

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 50,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              text={"Section created!"}
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 50,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              text={"Section created!"}
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

Example: Complex Text

When passing in your own Text component for the text property, be careful not to specify a color property, as the Toast component will automatically pick the right text color based on the Toast's background color.

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 50,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              text={
                <React.Fragment>
                  Saved to{' '}
                  <Text inline weight="bold">
                    <Link inline target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
                      Home decor
                    </Link>
                  </Text>
                </React.Fragment>
              }
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 50,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              text={
                <React.Fragment>
                  Saved to{' '}
                  <Text inline weight="bold">
                    <Link inline target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
                      Home decor
                    </Link>
                  </Text>
                </React.Fragment>
              }
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

Example: Red background color

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 50,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              color="red"
              text={
                <React.Fragment>
                  Oops! Something went wrong. Please try again later.
                </React.Fragment>
              }
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 50,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              color="red"
              text={
                <React.Fragment>
                  Oops! Something went wrong. Please try again later.
                </React.Fragment>
              }
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

Example: Image + Text

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 150,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              thumbnail={
                <Image
                  alt="Modern ceramic vase pin."
                  naturalHeight={564}
                  naturalWidth={564}
                  src="https://i.ibb.co/Lx54BCT/stock1.jpg"
                />
              }
              text={
                <React.Fragment>
                  Saved to{' '}
                  <Text inline weight="bold">
                    <Link inline target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
                      Home decor
                    </Link>
                  </Text>
                </React.Fragment>
              }
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 150,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              thumbnail={
                <Image
                  alt="Modern ceramic vase pin."
                  naturalHeight={564}
                  naturalWidth={564}
                  src="https://i.ibb.co/Lx54BCT/stock1.jpg"
                />
              }
              text={
                <React.Fragment>
                  Saved to{' '}
                  <Text inline weight="bold">
                    <Link inline target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
                      Home decor
                    </Link>
                  </Text>
                </React.Fragment>
              }
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

Example: Image + Text + Button

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 250,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              thumbnail={
                <Image
                  alt="Modern ceramic vase pin."
                  naturalHeight={564}
                  naturalWidth={564}
                  src="https://i.ibb.co/Lx54BCT/stock1.jpg"
                />
              }
              text={
                <React.Fragment>
                  Saved to{' '}
                  <Text inline weight="bold">
                    <Link inline target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
                      Home decor
                    </Link>
                  </Text>
                </React.Fragment>
              }
              button={<Button key="button-key" text="Undo" size="lg" />}
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);
  return (
    <Box>
      <Button
        text={ showToast ? 'Close toast' : 'Show toast' }
        onClick={() => setShowToast(!showToast)}
      />
      <Layer>
        <Box
          fit
          dangerouslySetInlineStyle={{
            __style: {
              bottom: 250,
              left: '50%',
              transform: 'translateX(-50%)',
            },
          }}
          paddingX={1}
          position="fixed"
        >
          {showToast && (
            <Toast
              thumbnail={
                <Image
                  alt="Modern ceramic vase pin."
                  naturalHeight={564}
                  naturalWidth={564}
                  src="https://i.ibb.co/Lx54BCT/stock1.jpg"
                />
              }
              text={
                <React.Fragment>
                  Saved to{' '}
                  <Text inline weight="bold">
                    <Link inline target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
                      Home decor
                    </Link>
                  </Text>
                </React.Fragment>
              }
              button={<Button key="button-key" text="Undo" size="lg" />}
            />
          )}
        </Box>
      </Layer>
    </Box>
  );
}

Combinations: Overview

Section created!

Section created!

Saved to Home decor

Combinations: Thumbnail shapes

Saved to Home decor

Edit page on GitHub