{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/feedback/notification","result":{"data":{"current":{"frontmatter":{"title":"Notification","order":88,"brief":"Notifications are used to actively send message notifications to users.","icon":"doc-notification"},"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":"#position","title":"Position"},{"url":"#with-icons","title":"With Icons"},{"url":"#colored-background","title":"Colored Background"},{"url":"#custom-children-with-link","title":"Custom Children with Link"},{"url":"#delay","title":"Delay"},{"url":"#manual-close","title":"Manual Close"},{"url":"#update-content","title":"Update content"}]},{"url":"#api-reference","title":"API Reference"},{"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\": 88,\n  \"category\": \"Feedback\",\n  \"title\": \"Notification\",\n  \"subTitle\": \"Notification\",\n  \"icon\": \"doc-notification\",\n  \"width\": \"65%\",\n  \"brief\": \"Notifications are used to actively send message notifications to users.\"\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 NotificationCard = makeShortcode(\"NotificationCard\");\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(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Notification } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Close after 3 seconds.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Button\\n        onClick={()=> Notification.open({\\n            title: 'Hi, Bytedance',\\n            content: 'ies dance dance dance',\\n            with: 3\\n        })}\\n    >\\n        Display Notification\\n    </Button>\\n);\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Position\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position\"), \" to set pop up position, supporting one of: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"top\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottom\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"topRight\"), \"(default)\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottomLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottomRight\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Notification, Button, ButtonGroup } from '@douyinfe/semi-ui';\\n\\n() => {\\n    let opts = {\\n        with: 3,\\n        Position: 'topRight',\\n        content: 'semi-ui-notification',\\n        title: 'Hi bytedance',\\n    };\\n\\n    return (\\n        <>\\n            <ButtonGroup>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'top' })}>top</Button>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'topLeft' })}>topLeft</Button>\\n                <Button onClick={() => Notification.info(opts)}>topRight</Button>\\n            </ButtonGroup>\\n            <br/><br/>\\n            <ButtonGroup>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'bottom' })}>bottom</Button>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'bottomRight' })}>bottomRight</Button>\\n                <Button onClick={() => Notification.info({ ...opts, position: 'bottomLeft' })}>bottomLeft</Button>\\n            </ButtonGroup>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"With Icons\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use different methods to show Notification with icons or you can pass in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"icon\"), \" for customized icon.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Notification, Button } from '@douyinfe/semi-ui';\\nimport { IconToutiaoLogo, IconVigoLogo } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let opts = {\\n        title: 'Hi, Bytedance',\\n        content: 'ies dance dance dance',\\n        duration: 3,\\n    };\\n\\n    return (\\n        <>\\n            <h5>Default Icon</h5>\\n            <Button type='primary' onClick={()=>Notification.success(opts)} style={{ margin: 4 }}>\\n                Success\\n            </Button>\\n            <Button onClick={() => Notification.info(opts)} style={{ margin: 4 }}>\\n                Info\\n            </Button>\\n            <Button type=\\\"warning\\\" onClick={()=>Notification.warning(opts)} style={{ margin: 4 }}>\\n                Warning\\n            </Button>\\n            <Button type=\\\"danger\\\" onClick={()=>Notification.error(opts)} style={{ margin: 4 }}>\\n                Error\\n            </Button>\\n            <h5>Customized Icon</h5>\\n            <Button\\n                icon={<IconToutiaoLogo />}\\n                style={{ marginRight: 5 }}\\n                onClick={() =>\\n                    Notification.info({\\n                        ...opts,\\n                        icon: <IconToutiaoLogo style={{ color: 'red' }} />,\\n                    })\\n                }\\n            ></Button>\\n            <Button\\n                icon={<IconVigoLogo />}\\n                style={{ marginRight: 5 }}\\n                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo /> })}\\n            ></Button>\\n            <Button\\n                icon={<IconVigoLogo />}\\n                onClick={() => Notification.info({ ...opts, icon: <IconVigoLogo style={{ color: 'pink' }} /> })}\\n            ></Button>\\n        </>\\n    );\\n};\\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\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    let opts = {\\n        title: 'Hi, Bytedance',\\n        content: 'Hi, Bytedance dance dance',\\n        duration: 3,\\n        theme: 'light'\\n    };\\n\\n    return (\\n        <>\\n            <Button onClick={() => Notification.info(opts)}>\\n                Info\\n            </Button>\\n            <br/>\\n            <br/>\\n            <Button onClick={() => Notification.success(opts)}>\\n                Success\\n            </Button>\\n            <br/>\\n            <br/>\\n            <Button type=\\\"warning\\\" onClick={() => Notification.warning(opts)}>\\n                Warning\\n            </Button>\\n            <br/>\\n            <br/>\\n            <Button type=\\\"danger\\\" onClick={() => Notification.error(opts)}>\\n                Error\\n            </Button>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom Children with Link\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use with Typography to create operation links for more complicated situations.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Notification, Button, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const { Text } = Typography;\\n\\n    let opts = {\\n        title: 'This is a title',\\n        content: (\\n            <>\\n                <div>Hi, Bytedance dance dance</div>\\n                <div style={{ marginTop: 8 }}>\\n                    <Text link>More Info</Text>\\n                    <Text link style={{ marginLeft: 20 }}>Show Later</Text>\\n                </div>\\n            </>),\\n        duration: 3,\\n    };\\n\\n    return (\\n        <Button\\n            onClick={() => Notification.info(opts)}\\n        >\\n            Display Notification\\n        </Button>\\n    );\\n};\\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\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    let opts = {\\n        content: 'Hi, Bytedance dance dance',\\n        duration: 10,\\n    };\\n\\n    return (\\n        <Button onClick={() => Notification.info(opts)}>\\n            Close After 10s\\n        </Button>\\n    );\\n};\\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\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    let opts = {\\n        content: 'Not auto close',\\n        title: 'Hi',\\n        duration: 0,\\n    };\\n    const [ids, setIds] = useState([]);\\n    function show() {\\n        let id = Notification.info(opts);\\n        setIds([...ids, id]);\\n    }\\n    function hide() {\\n        let idsTmp = [...ids];\\n        Notification.close(idsTmp.shift());\\n        setIds(idsTmp);\\n    }\\n    return (\\n        <>\\n            <Button type=\\\"primary\\\" onClick={show}>\\n                Show Notification\\n            </Button>\\n            <br />\\n            <br />\\n            <Button type=\\\"primary\\\" onClick={hide}>\\n                Hide Notification\\n            </Button>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Update content\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use id to update notification content. >=2.45.0\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Notification, Button } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Button\\n        onClick={() => {\\n            const id = Notification.open({\\n                title: 'Hi, Bytedance',\\n                content: 'ies dance dance dance',\\n                duration: 3,\\n            })\\n            setTimeout(() => {\\n                Notification.open({\\n                    title: 'Hi, Bytedance',\\n                    content: 'updated',\\n                    duration: 10,\\n                    id\\n                })\\n            }, 1000)\\n        }\\n        }\\n    >\\n        Display Notification\\n    </Button>\\n);\\n\\n\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The static methods provided are as follows:\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Display: You can pass in options object directly. Methods return the value of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \": \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const id = Notification.open({ /*...options*/ })\")), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.open({content: 'message', duration: 3})\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.info({content: 'message', duration: 3})\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.error({content: 'message', duration: 3})\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.warning({content: 'message', duration: 3})\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.success({content: 'message', duration: 3})\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Close Manually (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \" is the return value of the display methods)\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.close(id)\"))), 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  }, \"Content\"), 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  }, \"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 '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\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => document.body\"), 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  }, \"Topleft icon\"), 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  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Pop-up position, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topRight\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomRight\")), 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  }, \"topRight\")), 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  }, \"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  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Title\"), 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  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Z-index value. Only take effect for the first time.\"), 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  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback function when clicking the notification\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: event) => 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  }, \"onClose\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback function when closing notification, triggered for either auto-close or manually close\"), 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  }, \"onCloseClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback function when actively clicking on the close button\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(id: string \", \"|\", \" number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"p\", {\n    parentName: \"section\"\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  }, \"Notification.config(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  }, \"bottom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Bottom, absolute position\"), 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  }, \"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(second)\"), 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  }, \"left\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Left, absolute position\"), 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  }, \"position\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Pop-up position, one of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"topRight\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomLeft\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottomRight\")), 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  }, \"topRight\")), 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  }, \"Right, absolute position\"), 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  }, \"Top, absolute position\"), 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\"), 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(\"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  }, \"Notification.destroyAll()\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Hook Notification\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Notification.useNotification\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When you need access Context, you could use `\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Notification.useNotification\"), \" to create a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"contextHolder\"), \" and insert to corresponding DOM tree. Notification created by hooks will be able to access the context where \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"contextHolder\"), \" is inserted. Hook Notification has following methods: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"info\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"success\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"warning\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"error\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"open\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"close\"), \". For more usage demo, refer to \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/components/toast#useToast_Hooks\"\n  }, \"useToast\"))), 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 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role\"), \" of the component is'alert'\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The notification's \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\"), \" is marked as the corresponding notification title\"))), 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(NotificationCard, {\n    type: \"info\",\n    title: \"Task completed\",\n    content: mdx(\"div\", null, \"400 tasks succeed and 600 failed\", mdx(\"div\", {\n      style: {\n        color: 'var(--semi-color-primary)',\n        marginTop: 4,\n        fontWeight: 600\n      }\n    }, \"Check failed tasks\")),\n    mdxType: \"NotificationCard\"\n  })), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Title\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Explain in clear and concise language\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid punctuation such as commas, periods, etc.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Text\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"On the premise of complete information transmission, try to compress the text to 1-2 sentences\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A detailed description or explanation of the title, rather than a repetition of the title\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Use correct punctuation, commas within sentences and periods between sentences\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Operate\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The copy needs to show the specific meaning of the operation\"))))), 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/notification","next":{"fields":{"slug":"zh-CN/feedback/notification"},"id":"87ea5b27-bb7d-5eec-9dc7-dfa2a947d845","frontmatter":{"title":"Notification 通知","localeCode":"zh-CN","icon":"doc-notification","showNew":null}},"previous":{"fields":{"slug":"zh-CN/feedback/banner"},"id":"0df76d94-5818-529c-87e6-b3bb0fe27b54","frontmatter":{"title":"Banner 通知横幅","localeCode":"zh-CN","icon":"doc-banner","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}