{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/feedback/toast","result":{"data":{"current":{"frontmatter":{"title":"Toast","order":94,"brief":"Toast component is used to give timely feedback to user's operations. It could be the result feedback of the operation, such as success, failure, error, warning, etc.","icon":"doc-toast"},"fields":{"type":"feedback"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#other-types","title":"Other Types"},{"url":"#colored-background","title":"Colored Background"},{"url":"#stacking-styles","title":"Stacking styles"},{"url":"#custom-children-with-link","title":"Custom Children with Link"},{"url":"#delay","title":"Delay"},{"url":"#manual-close","title":"Manual Close"},{"url":"#update-toast-content","title":"Update Toast Content"},{"url":"#destroy-all","title":"Destroy all"},{"url":"#consume-context","title":"Consume Context"},{"url":"#create-toast-with-different-configurations","title":"Create Toast with different configurations"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#options","title":"Options"},{"url":"#config","title":"Config"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 94,\n \"category\": \"Feedback\",\n \"title\": \"Toast\",\n \"subTitle\": \"Toast\",\n \"icon\": \"doc-toast\",\n \"width\": \"65%\",\n \"brief\": \"Toast component is used to give timely feedback to user's operations. It could be the result feedback of the operation, such as success, failure, error, warning, etc.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar ToastCard = makeShortcode(\"ToastCard\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Calling Toast's related methods to show timely feedback to user's operations.\\nIt is recommended to set the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"stack\"), \" property to apply the stacking style to multiple Toasts on the same screen, and expand them by hovering, which can effectively prevent multiple parallel Toasts at one time. (this API is supported after v2.42.0)\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import { Toast } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true\",\n \"live\": \"true\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { Toast, Button } from '@douyinfe/semi-ui';\\nimport { throttle } from 'lodash-es';\\n\\nfunction Demo() {\\n const opts = {\\n content: 'Hi, Bytedance dance dance',\\n duration: 3,\\n stack: true,\\n };\\n\\n const handleClose = () => {\\n throttled.cancel();\\n };\\n const throttleOpts = {\\n content: 'Hi, Bytedance dance dance',\\n duration: 10,\\n onClose: handleClose,\\n stack: true,\\n };\\n const throttled = throttle(() => Toast.info(throttleOpts), 10000, { trailing: false });\\n\\n return (\\n
\\n \\n
\\n
\\n \\n
\\n );\\n}\\nrender(Demo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Other Types\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use different methods to show different Toast including success, warning, error and info.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true\",\n \"live\": \"true\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { Toast, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n let opts = {\\n content: 'Hi, Bytedance dance dance',\\n duration: 3,\\n };\\n\\n return (\\n <>\\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n );\\n}\\nrender(Demo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Colored Background\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You could use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" for a colored background style. Default is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"normal\"), \".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true\",\n \"live\": \"true\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { Toast, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n let opts = {\\n content: 'Hi, Bytedance dance dance',\\n duration: 3,\\n theme: 'light',\\n };\\n\\n return (\\n <>\\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n \\n \\n );\\n}\\nrender(Demo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Stacking styles\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can apply stacking styles to multiple Toasts on the same screen through the stack property, and Hover expands them. \\uFF08>=2.42.0\\uFF09\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import { Toast, Typography, Button } from '@douyinfe/semi-ui';\\n\\n()=>{\\n \\n const opts = {\\n content: 'Hi, Bytedance dance dance',\\n duration: 10,\\n stack: true,\\n };\\n\\n \\n return \\n}\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Children with Link\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Informational feedback\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true\",\n \"live\": \"true\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { Toast, Typography, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const { Text } = Typography;\\n\\n let opts = {\\n content: (\\n \\n Hi, Bytedance dance dance\\n \\n More Info\\n \\n \\n ),\\n duration: 3,\\n };\\n\\n let multiLineOpts = {\\n content: (\\n <>\\n
Hi, Bytedance dance dance
\\n
\\n More Info\\n \\n Later\\n \\n
\\n \\n ),\\n duration: 3,\\n };\\n\\n return (\\n <>\\n \\n
\\n
\\n \\n \\n );\\n}\\nrender(Demo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Delay\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"duration\"), \" to set up time delay. By default it closes after 3 seconds.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true hideInDSM\",\n \"live\": \"true\",\n \"noInline\": \"true\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Toast, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n let opts = {\\n content: 'Hi, Bytedance dance dance',\\n duration: 10,\\n };\\n\\n return ;\\n}\\nrender(Demo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Manual Close\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"duration\"), \" to 0 if you do not want the Notification to close by itself. In this case, it could only be closed manually.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true hideInDSM\",\n \"live\": \"true\",\n \"noInline\": \"true\",\n \"hideInDSM\": true\n }, \"import React, { useState } from 'react';\\nimport { Toast, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const [toastId, setToastId] = useState();\\n function show() {\\n if (toastId) {\\n return;\\n }\\n let id = Toast.info(opts);\\n setToastId(id);\\n }\\n function hide() {\\n Toast.close(toastId);\\n destroy();\\n }\\n function destroy() {\\n setToastId(null);\\n }\\n let opts = {\\n content: 'Not auto close',\\n duration: 0,\\n onClose: destroy,\\n };\\n return (\\n <>\\n \\n
\\n
\\n \\n \\n );\\n}\\n\\nrender(Demo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Update Toast Content\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use unique Toast \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"id\"), \" to update toast content.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true hideInDSM\",\n \"live\": \"true\",\n \"noInline\": \"true\",\n \"hideInDSM\": true\n }, \"import React, { useState } from 'react';\\nimport { Toast, Button } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n function show() {\\n const id = 'toastid';\\n Toast.info({ content: 'Update Content By Id', id });\\n setTimeout(() => {\\n Toast.success({ content: 'Id By Content Update', id });\\n }, 1000);\\n }\\n\\n return (\\n \\n );\\n}\\n\\nrender(Demo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Destroy all\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Globally Destroy:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.destroyAll()\"))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Consume Context\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You could use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Toast.useToast\"), \" to create a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"contextHolder\"), \" that could access context. Created toast will be inserted to where contextHolder is placed.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true hideInDSM\",\n \"live\": \"true\",\n \"noInline\": \"true\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport { Toast, Button } from '@douyinfe/semi-ui';\\n\\nconst ReachableContext = React.createContext();\\n\\nfunction Demo(props = {}) {\\n const [toast, contextHolder] = Toast.useToast();\\n const config = {\\n duration: 0,\\n title: 'This is a success message',\\n content: {name => `ReachableContext: ${name}`},\\n };\\n\\n return (\\n \\n
\\n {\\n toast.success(config);\\n }}\\n >\\n Hook Toast\\n \\n
\\n {contextHolder}\\n \\n );\\n}\\n\\nrender(Demo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Create Toast with different configurations\"), mdx(Notice, {\n mdxType: \"Notice\"\n }, \"Commonly used to override global configuration\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ToastFactory.create(config) => Toast\"), mdx(\"br\", {\n parentName: \"li\"\n }), \"If you need Toast with different configs in your application, you can use ToastFactory.create(config)to create a new Toast (>= 1.23):\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true noInline=true\",\n \"live\": \"true\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport { Button, ToastFactory } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const ToastInCustomContainer = ToastFactory.create({\\n getPopupContainer: () => document.getElementById('custom-toast-container'),\\n });\\n return (\\n
\\n \\n
\\n
\\n \\n
custom container
\\n
\\n );\\n}\\nrender(Demo);\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Globally Destroy:\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.destroyAll()\"))), mdx(\"p\", {\n parentName: \"section\"\n }, \"Consume Context\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.useToast\"), mdx(\"br\", {\n parentName: \"li\"\n }), \"When you need access Context, you could use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.useToast\"), \" to create a \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"contextHolder\"), \" and insert to corresponding DOM tree. Toast created by hooks will be able to access the context where \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"contextHolder\"), \" is inserted. Hook toast has following methods: \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"info\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"success\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"warning\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"error\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"close\"), \".\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API Reference\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The static methods provided are as follows: Display: You can pass in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options\"), \" object or string directly. Methods return the value of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"toastId\"), \": \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"const toastId = Toast.info({ /*...options*/ })\")), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"The global configuration is set before any method call, and takes effect only once\")), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.config(config)\"))), mdx(\"p\", {\n parentName: \"section\"\n }, \"** Show Toast Directly\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.info(options || string)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.error(options || string)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.warning(options || string)\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.success(options || string)\"))), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"info\"), \" \", mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"error\"), \" \", mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"warning\"), \" \", mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"success\"), \" return the \", mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"toastId\"), \", can be used for manually closing \")), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Toast.close(toastId)\"), \" Close Manually \"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Options\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Toast Options supports the following APIs as well as the APIs in Config\")), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"version\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toast content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"''\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"icon\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom icons\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"showClose\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Toggle Whether show close button\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"textMaxWidth\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Maximum width of content\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"450\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onClose\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when closing toast\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => void\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"stack\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Whether to stack toast\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.42.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"id\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Custom ToastId\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Config\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"The following API supports global configuration to change the default configuration of the current Toast\")), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"version\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bottom\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Pop-up position bottom\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"left\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Pop-up position left\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"right\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Pop-up position right\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"top\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Pop-up position top\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"zIndex\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Z-index value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"1010\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"theme\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Style of background fill, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"light\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"normal\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"normal\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"2.54.0\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"duration\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Automatic close delay, no auto-close when set to 0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"3\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"getPopupContainer\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set container and inner .semi-toast-wrapper 'position: relative` This will change the DOM tree position, but not the view's rendering position.\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => HTMLElement \", \"|\", \" null\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"() => document.body\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Accessibility\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"ARIA\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The role of Toast is alert\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), mdx(\"div\", {\n style: {\n border: '1px solid var(--semi-color-border)',\n padding: 10,\n marginBottom: 24,\n justifyContent: 'center',\n display: 'flex'\n }\n }, mdx(ToastCard, {\n type: \"success\",\n content: \"Ticket transferred\",\n mdxType: \"ToastCard\"\n })), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Keep it simple\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Do not use periods at the end of sentences\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Explain using the noun + verb format\")), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u2705 Recommended usage\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u274C Deprecated usage\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Language added\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"New language has been added successfully\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Ticket transfer failed\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Can't transfer ticket\")))), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Provide prompt message for action\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"only provide one action\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Don't use actions like \\\"read\\\" like OK, Got it, Dismiss, Cancel\")))), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u2705 Recommended usage\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u274C Deprecated usage\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ToastCard, {\n type: \"error\",\n content: mdx(\"div\", null, \"Ticket transfer failed \", mdx(\"span\", {\n style: {\n color: 'var(--semi-color-primary)',\n marginLeft: 4,\n cursor: 'pointer'\n }\n }, \"Retry\"), \" \"),\n mdxType: \"ToastCard\"\n })), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(ToastCard, {\n type: \"error\",\n content: mdx(\"div\", null, \"Ticket transfer failed \", mdx(\"span\", {\n style: {\n color: 'var(--semi-color-primary)',\n marginLeft: 4,\n cursor: 'pointer'\n }\n }, \"Dismiss\"), \" \"),\n mdxType: \"ToastCard\"\n })))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/feedback/toast","next":{"fields":{"slug":"zh-CN/feedback/toast"},"id":"82ffec3b-93d1-539e-85e3-47003b1f3d57","frontmatter":{"title":"Toast 提示","localeCode":"zh-CN","icon":"doc-toast","showNew":null}},"previous":{"fields":{"slug":"zh-CN/feedback/spin"},"id":"5ec890d9-17e4-5e83-bc49-504b3952fa3d","frontmatter":{"title":"Spin 加载器","localeCode":"zh-CN","icon":"doc-spin","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}