import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>Basic usage: Row one, third column at the bottom right of the page </span> <FloatButton icon={<IconAIEditLevel1 />} style={{ bottom: '270px' }} onClick={onClick}/> </> ); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>Large size: Row two, third column at the bottom right of the page </span> <FloatButton size="large" icon={<IconAIEditLevel1 />} style={{ bottom: '200px' }} onClick={onClick}/> </>); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>Square: Row three, third column at the bottom right of the page </span> <FloatButton shape="square" icon={<IconAIEditLevel1 />} style={{ bottom: '150px' }} onClick={onClick}/> </>); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>Click to jump: Row four, third column at the bottom right of the page</span> <FloatButton icon={<IconAIEditLevel1 />} style={{ bottom: '100px' }} href={'https://semi.design'} target={'_blank'} /> </>); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { const onClick = () => { console.log('float button clicked'); }; return (<> <span>Colorful buttons: The first column at the bottom right of the page</span> <FloatButton colorful icon={<IconAIEditLevel1 />} style={{ bottom: '110px', insetInlineEnd: '150px' }} href={'https://semi.design'} target={'_blank'} /> </>); };

import React from 'react'; import { FloatButton } from '@douyinfe/semi-ui'; import { IconAIEditLevel1 } from '@douyinfe/semi-icons'; () => { return (<> <span>With badge: second column from the bottom right of the page</span> <FloatButton disabled icon={<IconAIEditLevel1 />} badge={{ dot: true, type: 'danger' }} style={{ bottom: 270, insetInlineEnd: '100px' }} /> <FloatButton badge={{ count: 1000, overflowCount: 999 }} size={"large"} icon={<IconAIEditLevel1 />} style={{ bottom: 210, insetInlineEnd: 100 }} /> <FloatButton icon={<IconAIEditLevel1 />} badge={{ dot: true }} colorful style={{ bottom: 170, insetInlineEnd: 100 }} /> <FloatButton icon={<IconAIEditLevel1 />} colorful size="large" badge={{ count: 'VIP', type: "danger" }} style={{ bottom: 110, insetInlineEnd: 100 }} /> </>); };

import React from 'react'; import { FloatButtonGroup } from '@douyinfe/semi-ui'; import { IconAIEditLevel1, IconAIStrokedLevel3, IconSearchStroked, IconHelpCircleStroked } from '@douyinfe/semi-icons'; () => { return (<> <span>页面右下方最后一行</span> <FloatButtonGroup style={{ insetInlineEnd: 24, bottom: 50, }} items={[ { icon: <IconAIStrokedLevel3 />, content: "Edit" }, { icon: <IconSearchStroked />, content: "Search" }, { icon: <IconHelpCircleStroked />, content: "Help" } ]} /> </>); };