{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/basic/floatbutton","result":{"data":{"current":{"frontmatter":{"title":"FloatButton","order":23,"brief":"A floating button is an actionable button that can float on the page","icon":"doc-floatButton"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#size","title":"Size"},{"url":"#shape","title":"Shape"},{"url":"#click-to-jump","title":"Click to jump"},{"url":"#ai-style---colorful-floating-buttons","title":"AI style - Colorful floating buttons"},{"url":"#badge","title":"Badge"},{"url":"#floating-button-group","title":"Floating button Group"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#floatbutton","title":"FloatButton"},{"url":"#floatbuttongroupitem","title":"FloatButtonGroupItem"},{"url":"#floatbuttongroup","title":"FloatButtonGroup"}]}]},"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\": 23,\n  \"category\": \"Basic\",\n  \"title\": \"FloatButton\",\n  \"icon\": \"doc-floatButton\",\n  \"brief\": \"A floating button is an actionable button that can float on the page\",\n  \"showNew\": true\n};\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  }, \"FloatButton is supported since 2.85.0.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { FloatButton } 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\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n\\n    return (<>\\n        <span>Basic usage: Row one, third column at the bottom right of the page </span>\\n        <FloatButton icon={<IconAIEditLevel1 />} style={{ bottom: '270px' }} onClick={onClick}/>\\n    </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Size\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Three sizes are supported: default, small, large.\"), 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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n    return (<>\\n        <span>Large size: Row two, third column at the bottom right of the page </span>\\n        <FloatButton size=\\\"large\\\" icon={<IconAIEditLevel1 />} style={{ bottom: '200px' }} onClick={onClick}/>\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Shape\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Two shapes are defined by default: square (default) and circle.\"), 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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n    return (<>\\n        <span>Square: Row three, third column at the bottom right of the page </span>\\n        <FloatButton shape=\\\"square\\\" icon={<IconAIEditLevel1 />} style={{ bottom: '150px' }} onClick={onClick}/>\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Click to jump\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can set the jump address through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"href\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"target\"), \" specifies the window or frame in which the target web page should be opened.\"), 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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n    return (<>\\n        <span>Click to jump: Row four, third column at the bottom right of the page</span>\\n        <FloatButton\\n            icon={<IconAIEditLevel1 />} \\n            style={{ bottom: '100px' }} \\n            href={'https://semi.design'}\\n            target={'_blank'}\\n        />\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AI style - Colorful floating buttons\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"colorful\"), \" to true to display colorful floating buttons.\"), 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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const onClick = () => {\\n        console.log('float button clicked');\\n    };\\n    return (<>\\n        <span>Colorful buttons: The first column at the bottom right of the page</span>\\n        <FloatButton\\n            colorful\\n            icon={<IconAIEditLevel1 />} \\n            style={{ bottom: '110px', insetInlineEnd: '150px' }} \\n            href={'https://semi.design'}\\n            target={'_blank'}\\n        />\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Badge\"), 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 { FloatButton } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1 } from '@douyinfe/semi-icons';\\n\\n() => {\\n    return (<>\\n        <span>With badge: second column from the bottom right of the page</span>\\n        <FloatButton\\n            disabled\\n            icon={<IconAIEditLevel1 />}  \\n            badge={{ dot: true, type: 'danger' }} \\n            style={{ bottom: 270, insetInlineEnd: '100px' }} \\n        />\\n        <FloatButton\\n            badge={{ count: 1000, overflowCount: 999 }} \\n            size={\\\"large\\\"}\\n            icon={<IconAIEditLevel1 />}  \\n            style={{ bottom: 210, insetInlineEnd: 100 }} \\n        />\\n        <FloatButton \\n            icon={<IconAIEditLevel1 />}  \\n            badge={{ dot: true }} \\n            colorful \\n            style={{ bottom: 170, insetInlineEnd: 100 }} \\n        />\\n        <FloatButton \\n            icon={<IconAIEditLevel1 />}  \\n            colorful\\n            size=\\\"large\\\"\\n            badge={{ count: 'VIP', type: \\\"danger\\\" }}\\n            style={{ bottom: 110, insetInlineEnd: 100 }} \\n        />\\n    </>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Floating button Group\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Subitems can be passed in via \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"items\"), \".\"), 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 { FloatButtonGroup } from '@douyinfe/semi-ui';\\nimport { IconAIEditLevel1, IconAIStrokedLevel3, IconSearchStroked, IconHelpCircleStroked } from '@douyinfe/semi-icons';\\n\\n() => {\\n    return (<>\\n        <span>\\u9875\\u9762\\u53F3\\u4E0B\\u65B9\\u6700\\u540E\\u4E00\\u884C</span>\\n        <FloatButtonGroup \\n            style={{\\n                insetInlineEnd: 24,\\n                bottom: 50,\\n            }}\\n            onClick={(value, e) => {\\n                console.log('Clicked ', value);\\n            }}\\n            items={[\\n                {\\n                    icon: <IconAIStrokedLevel3 />,\\n                    content: \\\"Edit\\\",\\n                    value: 'editor',\\n                },\\n                {\\n                    icon: <IconSearchStroked />,\\n                    content: \\\"Search\\\",\\n                    value: 'search',\\n                },\\n                {\\n                    icon: <IconHelpCircleStroked />,\\n                    content: \\\"Help\\\",\\n                    value: 'help'\\n                }\\n            ]}\\n        />\\n    </>);\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"FloatButton\"), 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(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"badge\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Badge parameters\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/en-US/show/badge#API%E5%8F%82%E8%80%83\"\n  }, \"BadgeProps\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"colorful\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Use colorful floating buttons\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Disabled state\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"href\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Click the jump link, the same as \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/Location/href\"\n  }, \"href\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), 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  }, \"Icon\"), 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  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Click callback function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: React.MouseEvent)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shape\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Shape, supports round, square\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"round\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Size, supports default, small, large\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"default\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"target\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Specifies where to display the URL of the link, same as \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/a#target\"\n  }, \"target\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"FloatButtonGroupItem\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Add the following parameters based on FloatButtonProps\"), 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(\"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  }, \"Text content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"String\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Value of item\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"String\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"FloatButtonGroup\"), 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(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Disabled state\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"items\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Information about a single child\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"FloatButtonGroupItem\"), 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  }, \"Click callback function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: string, e: React.MouseEvent)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/basic/floatbutton","next":{"fields":{"slug":"zh-CN/basic/floatbutton"},"id":"890bfdb0-976c-5ed7-baa6-0ef36075f1ab","frontmatter":{"title":"FloatButton 悬浮按钮","localeCode":"zh-CN","icon":"doc-floatButton","showNew":true}},"previous":{"fields":{"slug":"zh-CN/basic/button"},"id":"95f684de-7ce2-5239-9ca0-1a785ebfbd06","frontmatter":{"title":"Button 按钮","localeCode":"zh-CN","icon":"doc-button","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}