FloatButton

Demos

How to import

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

Basic usage

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

Code

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

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-solid';
import { FloatButton } from '@fibrous/semi-ui-solid';

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-solid';
import { FloatButton } from '@fibrous/semi-ui-solid';

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-solid';
import { FloatButton } from '@fibrous/semi-ui-solid';

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-solid';
import { FloatButton } from '@fibrous/semi-ui-solid';

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

Badge

带徽章：页面右下第二列

Code

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

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

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(event) first, then the group's onClick(value, event). The group's disabled disables every item.

页面右下方最后一行

帮助

Code

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

export default function FloatButtonDemo() {
    const items = [
        { icon: <IconAIStrokedLevel3 />, content: '编辑', value: 'editor' },
        { icon: <IconSearchStroked />, content: '搜索', value: 'search', disabled: true },
        { icon: <IconHelpCircleStroked />, content: '帮助', value: 'help', href: 'https://semi.design', target: '_blank' },
    ];

    return (
        <>
            <span>页面右下方最后一行</span>
            <FloatButtonGroup
                style={{ 'inset-inline-end': '24px', bottom: '50px' }}
                onClick={(value) => {
                    console.log('点击了 ', value);
                }}
                items={items}
            />
        </>
    );
}

API Reference

Props

Property	Description	Type	Default
badge	Badge props, same as Badge. Applied to the Badge that wraps the button content.	`BadgeProps`	-
colorful	Colorful float button.	`boolean`	`false`
disabled	Disabled state.	`boolean`	-
href	Link address. Renders an `a` element when set; a disabled link drops it.	`string`	-
icon	Button icon, passed as a JSX element.	`JSX.Element`	-
onClick	Click callback with the native `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`.	`FloatButtonShape`	`"round"`
size	Size: `default`, `small` or `large`.	`FloatButtonSize`	`"default"`
target	Where to display the linked URL. Only takes effect with `href`.	`string`	-

class, style, ref and native attributes and events (such as id, aria-* and onClick) land on the root element: an <a> when href is set, otherwise a <button>. onClick is not called while disabled.

FloatButtonGroupItem

Add the following parameters based on FloatButtonProps. An item's href, target, rel, disabled, onClick, class, 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, 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	`JSX.Element`	-
value	Value of the item, passed as the first argument of `onClick`	`string`	-

FloatButtonGroup

Props

Property	Description	Type	Default
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 the native `MouseEvent`. The item's own `onClick` runs first.	`Type`	-

class, style, ref and native attributes (such as id and aria-*) land on the root div, which has role="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