Toast

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

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

also known as Snackbar

Figma:

Web:

iOS:

Android:

A11y:

<Toast
    primaryAction={{ accessibilityLabel: 'Test', label: 'Undo', size: 'lg' }}
    text={
      <Text inline> Saved to
        <Link display="inline" target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
          Home decor
        </Link>
      </Text>
    }
    thumbnail={{ image:
      <Image
        alt="Modern ceramic vase pin."
        naturalHeight={564}
        naturalWidth={564}
        src="https://i.ibb.co/Lx54BCT/stock1.jpg"
      />
    }}
  />

<Toast
    primaryAction={{ accessibilityLabel: 'Test', label: 'Undo', size: 'lg' }}
    text={
      <Text inline> Saved to
        <Link display="inline" target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
          Home decor
        </Link>
      </Text>
    }
    thumbnail={{ image:
      <Image
        alt="Modern ceramic vase pin."
        naturalHeight={564}
        naturalWidth={564}
        src="https://i.ibb.co/Lx54BCT/stock1.jpg"
      />
    }}
  />

Props

Component props
Name	Type	Default
`text` Required	`string \| React.Element<typeof Text>`	-
	Main content of Toast. Content should be localized. See the Text variant to learn more.
`dismissButton`	`{\| accessibilityLabel?: string, onDismiss: () => void, \|}`	-
	Adds a dismiss button to Toast. See the Dismissible variant for more info. The `accessibilityLabel` should follow the Accessibility guidelines.
`helperLink`	`{\| text: string, accessibilityLabel: string, href: string, onClick?: ({\| event: SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, \|}) => void, \|}`	-
	Helper Link to be placed after the subtext. See the helper link variant to learn more.
`primaryAction`	`{\| accessibilityLabel: string, href?: string, label: string, onClick?: $ElementType<ElementConfig<typeof Button>, "onClick">, rel?: $ElementType<ElementConfig<typeof Link>, "rel">, size?: $ElementType<ElementConfig<typeof Button>, "size">, target?: $ElementType<ElementConfig<typeof Link>, "target">, \|}`	-
	Adds an optional button for user interaction. Generally not recommended given the ephemeral nature of Toasts.
`thumbnail`	`{\| image: React.Element<typeof Image> \|} \| {\| avatar: React.Element<typeof Avatar> \|} \| {\| icon: React.Element<typeof Icon> \|}`	-
	An optional thumbnail to display next to the text.
`type`	`"default" \| "success" \| "error" \| "progress"`	`"default"`
	See the type variant to learn more.

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., entered password doesn't meet requirements). Use inline text instead.

Accessibility

Partially ready

Localization

Remember to localize text and any string within primaryAction.

Variants

How to display

Toasts should be displayed in the center of the viewport, opposite the main navbar (e.g. at the top of the viewport on mobile, bottom of the viewport on desktop). Though not implemented here, Toasts are meant to be ephemeral and disappear after a few seconds.

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);

  return (
    <Box>
      <Button
        onClick={() => setShowToast((currVal) => !currVal)}
        text={showToast ? 'Close toast' : 'Show toast'}
      />

      {showToast && (
        <Layer>
          <Box
            dangerouslySetInlineStyle={{
              __style: {
                bottom: 50,
                left: '50%',
                transform: 'translateX(-50%)',
              },
            }}
            width="100%"
            paddingX={1}
            position="fixed"
            display="flex"
            justifyContent="center"
          >
            <Toast
              primaryAction={{ accessibilityLabel: 'Test', label: 'Undo', size: 'lg' }}
              text={
                <Text inline>
                  Saved to{' '}
                  <Link display="inline" target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
                    Home decor
                  </Link>
                </Text>
              }
              thumbnail={{ image:
                <Image
                  alt="Modern ceramic vase pin."
                  naturalHeight={564}
                  naturalWidth={564}
                  src="https://i.ibb.co/Lx54BCT/stock1.jpg"
                />
              }}
            />
          </Box>
        </Layer>
      )}
    </Box>
  );
}

function ToastExample() {
  const [showToast, setShowToast] = React.useState(false);

  return (
    <Box>
      <Button
        onClick={() => setShowToast((currVal) => !currVal)}
        text={showToast ? 'Close toast' : 'Show toast'}
      />

      {showToast && (
        <Layer>
          <Box
            dangerouslySetInlineStyle={{
              __style: {
                bottom: 50,
                left: '50%',
                transform: 'translateX(-50%)',
              },
            }}
            width="100%"
            paddingX={1}
            position="fixed"
            display="flex"
            justifyContent="center"
          >
            <Toast
              primaryAction={{ accessibilityLabel: 'Test', label: 'Undo', size: 'lg' }}
              text={
                <Text inline>
                  Saved to{' '}
                  <Link display="inline" target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
                    Home decor
                  </Link>
                </Text>
              }
              thumbnail={{ image:
                <Image
                  alt="Modern ceramic vase pin."
                  naturalHeight={564}
                  naturalWidth={564}
                  src="https://i.ibb.co/Lx54BCT/stock1.jpg"
                />
              }}
            />
          </Box>
        </Layer>
      )}
    </Box>
  );
}

Text

The text prop accepts either a string or Text. Use a string for guide toasts without any visual style. Toast will handle the text style and adherence to design guidelines. Regular strings are subject to two-line truncation.

If confirmation toast's text with more complex style is required, such as bold text, inline links, or no truncation, use Text to wrap your message with any additional Text or Link usages contained within. When passing in your own Text component for text, do not specify color on Text. Toast will automatically pick the correct text color for the given type.

<Flex direction="column" gap={4} justifyContent="center">
  <Toast text="Signed as Three Crafty Ladies" />
  <Toast
    text={
      <Text inline>
        Saved to{' '}
        <Link display="inline" target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
          Home decor
        </Link>
      </Text>
    }
  />
</Flex>

<Flex direction="column" gap={4} justifyContent="center">
  <Toast text="Signed as Three Crafty Ladies" />
  <Toast
    text={
      <Text inline>
        Saved to{' '}
        <Link display="inline" target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
          Home decor
        </Link>
      </Text>
    }
  />
</Flex>

<Flex direction="column" justifyContent="center" width="100%" gap={4}>
  <Toast
    text="Your account admin rights were successfully saved"
    primaryAction={{ accessibilityLabel: 'Undo', label: 'Undo' }}
    thumbnail={{ image:
      <Image
        alt="Modern ceramic vase pin."
        naturalHeight={564}
        naturalWidth={564}
        src="https://i.ibb.co/Lx54BCT/stock1.jpg"
      />
    }}
  />
  <Toast
    text="Your account admin rights were successfully saved."
    dismissButton={{ onDismiss: () => {} }}
    helperLink={{
      text: "Go to settings",
      accessibilityLabel: "Go to settings",
      href: "#",
    }}
  />
</Flex>

<Flex direction="column" justifyContent="center" width="100%" gap={4}>
  <Toast
    text="Your account admin rights were successfully saved"
    primaryAction={{ accessibilityLabel: 'Undo', label: 'Undo' }}
    thumbnail={{ image:
      <Image
        alt="Modern ceramic vase pin."
        naturalHeight={564}
        naturalWidth={564}
        src="https://i.ibb.co/Lx54BCT/stock1.jpg"
      />
    }}
  />
  <Toast
    text="Your account admin rights were successfully saved."
    dismissButton={{ onDismiss: () => {} }}
    helperLink={{
      text: "Go to settings",
      accessibilityLabel: "Go to settings",
      href: "#",
    }}
  />
</Flex>

Primary action

<Flex justifyContent="center" width="100%">
  <Toast
    primaryAction={{ accessibilityLabel: 'Test', label: 'Undo' }}
    text={
      <Text inline>
        Saved to{' '}
        <Link display="inline" target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
          Home decor
        </Link>
      </Text>
    }

  />
</Flex>

<Flex justifyContent="center" width="100%">
  <Toast
    primaryAction={{ accessibilityLabel: 'Test', label: 'Undo' }}
    text={
      <Text inline>
        Saved to{' '}
        <Link display="inline" target="blank" href="https://www.pinterest.com/search/pins/?q=home%20decor">
          Home decor
        </Link>
      </Text>
    }

  />
</Flex>

Dismissable

<Flex justifyContent="center" width="100%">
  <Toast
    primaryAction={{ accessibilityLabel: 'Test', label: 'Undo' }}
    text="Your Pin was saved"
    dismissButton={{ onClick: () => {} }}
  />
</Flex>

<Flex justifyContent="center" width="100%">
  <Toast
    primaryAction={{ accessibilityLabel: 'Test', label: 'Undo' }}
    text="Your Pin was saved"
    dismissButton={{ onClick: () => {} }}
  />
</Flex>

Type

<Flex direction="column" gap={8} alignItems="start">
  <Flex gap={2} >
    <Text>Success message:</Text>
    <Toast
      type="success"
      text="Your Pin was published"
    />
  </Flex>
  <Flex gap={2}>
    <Text>Error message:</Text>
    <Toast
      type="error"
      text="We couldn't save your Pin"
    />
  </Flex>
  <Flex gap={2}>
    <Text>Loading message:</Text>
    <Toast
      type="progress"
      text="We are publishing your Pin"
    />
  </Flex>
</Flex>

<Flex direction="column" gap={8} alignItems="start">
  <Flex gap={2} >
    <Text>Success message:</Text>
    <Toast
      type="success"
      text="Your Pin was published"
    />
  </Flex>
  <Flex gap={2}>
    <Text>Error message:</Text>
    <Toast
      type="error"
      text="We couldn't save your Pin"
    />
  </Flex>
  <Flex gap={2}>
    <Text>Loading message:</Text>
    <Toast
      type="progress"
      text="We are publishing your Pin"
    />
  </Flex>
</Flex>

Thumbnail

<Flex direction="column" gap={2} alignItems="start">
  <Toast
    button={<Button key="button-key" text="Undo" size="lg" />}
    text="Save the link from your clipboard?"
    thumbnail={{ icon:
      <Icon
        accessibilityLabel="Go to next steps"
        icon="link"
      />
    }}
  />
  <Toast
    helperLink={{
      accessibilityLabel: '',
      text: 'Home decor',
      href: 'http://www.pinterest.com',
      onClick: () => {},
    }}
    button={<Button key="button-key" text="Undo" size="lg" />}
    text="Saved to"
    thumbnail={{ image:
      <Image
        alt="Modern ceramic vase pin."
        naturalHeight={564}
        naturalWidth={564}
        src="https://i.ibb.co/Lx54BCT/stock1.jpg"
      />
    }}
  />
  <Toast
    button={<Button key="button-key" text="Undo" size="lg" />}
    text="Switched to Silverio Ibrahim"
    thumbnail={{ avatar:
      <Avatar
        src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
        name="Keerthi"
      />
    }}
  />
</Flex>

<Flex direction="column" gap={2} alignItems="start">
  <Toast
    button={<Button key="button-key" text="Undo" size="lg" />}
    text="Save the link from your clipboard?"
    thumbnail={{ icon:
      <Icon
        accessibilityLabel="Go to next steps"
        icon="link"
      />
    }}
  />
  <Toast
    helperLink={{
      accessibilityLabel: '',
      text: 'Home decor',
      href: 'http://www.pinterest.com',
      onClick: () => {},
    }}
    button={<Button key="button-key" text="Undo" size="lg" />}
    text="Saved to"
    thumbnail={{ image:
      <Image
        alt="Modern ceramic vase pin."
        naturalHeight={564}
        naturalWidth={564}
        src="https://i.ibb.co/Lx54BCT/stock1.jpg"
      />
    }}
  />
  <Toast
    button={<Button key="button-key" text="Undo" size="lg" />}
    text="Switched to Silverio Ibrahim"
    thumbnail={{ avatar:
      <Avatar
        src="https://i.ibb.co/ZfCZrY8/keerthi.jpg"
        name="Keerthi"
      />
    }}
  />
</Flex>

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Ready	Component is available in Figma across all platforms.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub

; Opens a new tab