FloatButton

Demos

How to import

import { FloatButton, FloatButtonGroup } from '@fibrous/semi-ui-react';

Basic usage

基本使用：页面右下第三列 1

Code

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    const onClick = () => {
        console.log('float button clicked');
    };

    return (
        <>
            <span>基本使用：页面右下第三列 1 </span>
            <FloatButton aria-label="AI 编辑" icon={<IconAIEditLevel1 />} style={{ bottom: '270px' }} onClick={onClick} />
        </>
    );
}

Size

Three sizes are supported: default, small, large.

大尺寸：页面右下第三列 2

Code

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    const onClick = () => {
        console.log('float button clicked');
    };
    return (
        <>
            <span>大尺寸：页面右下第三列 2</span>
            <FloatButton aria-label="AI 编辑" size="large" icon={<IconAIEditLevel1 />} style={{ bottom: '200px' }} onClick={onClick} />
        </>
    );
}

Shape

Two shapes are defined by default: round (default) and square.

方形：页面右下第三列 3

Code

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    const onClick = () => {
        console.log('float button clicked');
    };
    return (
        <>
            <span>方形：页面右下第三列 3</span>
            <FloatButton aria-label="AI 编辑" shape="square" icon={<IconAIEditLevel1 />} style={{ bottom: '150px' }} onClick={onClick} />
        </>
    );
}

Click to jump

With href set, the button renders as a native <a> link: target specifies the window or frame in which the linked page opens, and rel the relationship to it. Opening in a new tab with the middle button and copying the link address from the context menu are native browser behaviour. Without href it renders as a native <button type="button">.

点击跳转：页面右下第三列 4

Code

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    return (
        <>
            <span>点击跳转：页面右下第三列 4</span>
            <FloatButton aria-label="访问 Semi 官网" icon={<IconAIEditLevel1 />} style={{ bottom: '100px' }} href="https://semi.design" rel="noopener noreferrer" target="_blank" />
        </>
    );
}

AI style - Colorful floating buttons

You can set colorful to true to display colorful floating buttons.

多彩按钮：页面右下第一列

Code

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    return (
        <>
            <span>多彩按钮：页面右下第一列</span>
            <FloatButton aria-label="访问 Semi 官网" colorful icon={<IconAIEditLevel1 />} style={{ bottom: '110px', insetInlineEnd: '150px' }} href="https://semi.design" rel="noopener noreferrer" target="_blank" />
        </>
    );
}

Badge

带徽章：页面右下第二列

Code

import { IconAIEditLevel1 } from '@fibrous/semi-icons-react';
import { FloatButton } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    return (
        <>
            <span>带徽章：页面右下第二列</span>
            <FloatButton disabled aria-label="AI 编辑" icon={<IconAIEditLevel1 />} badge={{ dot: true, type: 'danger' }} style={{ bottom: 270, insetInlineEnd: '100px' }} />
            <FloatButton badge={{ count: 1000, overflowCount: 999 }} size="large" aria-label="AI 编辑，999+" icon={<IconAIEditLevel1 />} style={{ bottom: 210, insetInlineEnd: 100 }} />
            <FloatButton aria-label="AI 编辑" icon={<IconAIEditLevel1 />} badge={{ dot: true }} colorful style={{ bottom: 170, insetInlineEnd: 100 }} />
            <FloatButton aria-label="AI 编辑，VIP" icon={<IconAIEditLevel1 />} colorful size="large" badge={{ count: 'VIP', type: 'danger' }} style={{ bottom: 110, insetInlineEnd: 100 }} />
        </>
    );
}

Floating button Group

Subitems can be passed in via items. Like a single FloatButton, each item renders as a native button or link and honours its own href, target, rel, disabled and onClick; clicking an item calls its onClick(e) first, then the group's onClick(value, e). The group's disabled disables every item.

页面右下方最后一行

帮助

Code

import { IconAIStrokedLevel3, IconSearchStroked, IconHelpCircleStroked } from '@fibrous/semi-icons-react';
import { FloatButtonGroup } from '@fibrous/semi-ui-react';

export default function FloatButtonDemo() {
    return (
        <>
            <span>页面右下方最后一行</span>
            <FloatButtonGroup
                style={{
                    insetInlineEnd: 24,
                    bottom: 50,
                }}
                onClick={(value) => {
                    console.log('点击了 ', value);
                }}
                items={[
                    {
                        icon: <IconAIStrokedLevel3 />,
                        content: '编辑',
                        value: 'editor',
                    },
                    {
                        icon: <IconSearchStroked />,
                        content: '搜索',
                        value: 'search',
                        disabled: true,
                    },
                    {
                        icon: <IconHelpCircleStroked />,
                        content: '帮助',
                        value: 'help',
                        href: 'https://semi.design',
                        target: '_blank',
                    },
                ]}
            />
        </>
    );
}

API Reference

Props

Property	Description	Type	Default
badge	Badge props, same as Badge. Applied to the Badge that wraps the button content.	`BadgeProps`	-
className	Class name of the root element.	`string`	-
colorful	Colorful float button.	`boolean`	`false`
disabled	Disabled state. A disabled link drops `href` and sets `role` to `link`.	`boolean`	-
href	Link address. Renders an `<a>` element when set; a disabled link drops it.	`string`	-
icon	Button icon, rendered inside the button content.	`React.ReactNode`	-
onClick	Click callback with a `React.MouseEvent`. Not called while disabled.	`Type`	-
ref	Points to the root element: an `<a>` when `href` is set, otherwise a `<button>`.	`Type`	-
rel	Relationship to the link target. Only takes effect with `href`.	`string`	-
shape	Shape: `round` or `square`.	`'square' \| 'round'`	`"round"`
size	Size: `default`, `small` or `large`.	`'small' \| 'default' \| 'large'`	`"default"`
style	Style of the root element.	`React.CSSProperties`	-
target	Where to display the linked URL. Only takes effect with `href`.	`string`	-

Other native attributes (such as id, aria-label and title) are spread onto the root element through ...rest: an <a> when href is set, otherwise a <button type="button">.

FloatButtonGroupItem

Add the following parameters based on FloatButtonProps. An item's href, target, rel, disabled, onClick, className, style and ref mean the same as on FloatButton; shape, size and colorful work as the props of the same name on a standalone FloatButton (the item carries the semi-floatButton-{shape}, semi-floatButton-{size} and semi-floatButton-colorful class names), and an item with size has that fixed width and height.

Properties	Instructions	Type	Default
aria-label	Accessible name of the item, required when it has only an icon	string	-
content	Text content	ReactNode	-
value	Value of the item, passed as the first argument of `onClick`	string	-

FloatButtonGroup

Props

Property	Description	Type	Default
className	Class name of the root element.	`string`	-
disabled	Disables every item.	`boolean`	-
items	List of items, typed as `FloatButtonGroupItem` below.	`FloatButtonGroupItem[]`	-
onClick	Called when an enabled item is clicked, with that item's `value` (`undefined` when unset) and a `React.MouseEvent`. The item's own `onClick` runs first.	`Type`	-
ref	Reference to the root element (`role="group"`).	`Type`	-
style	Style of the root element.	`React.CSSProperties`	-

Other native attributes (such as id and aria-*) land on the root div, whose role defaults to group.

Accessibility

ARIA

FloatButton and every FloatButtonGroup item are native elements: a link <a> when href is set, otherwise a <button type="button">, so screen readers announce the matching role
The accessible name comes from aria-label, or from the visible text (an item's content) without it. A FloatButton usually shows only an icon, so always pass an aria-label that describes what it does, such as aria-label="Back to top"; an icon-only item needs an aria-label on the item as well
Text shown in the badge (badge.count) is part of the button's visible text, and aria-label replaces it, so include the badge text in aria-label, such as aria-label="AI edit, VIP", so that speech input users can operate the button by the text they see
A disabled button uses the native disabled attribute together with aria-disabled="true". A link has no native disabled state: a disabled link drops its href (it can no longer be clicked, opened with the middle button or the context menu, and leaves the Tab order) and takes role="link" with aria-disabled="true", so screen readers still announce an unavailable link
The root of FloatButtonGroup has role="group"; name the whole group with aria-label or aria-labelledby (aria-* attributes go to the root)
FloatButtonGroup has no selected state, so items do not use aria-pressed

Keyboard and focus

Focus works as with native buttons and links: Tab and Shift + Tab move between them, and disabled items cannot be focused
A focused button is activated with Enter or Space, a focused link is followed with Enter
A focus outline is shown on keyboard focus