FloatButton

Demos

How to import

<script setup lang="ts">
    import { FloatButton, FloatButtonGroup } from '@fibrous/semi-ui-vue';
</script>

Basic usage

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

Code

<script setup lang="ts">
    import { IconAIEditLevel1 } from '@fibrous/semi-icons-vue';
    import { FloatButton } from '@fibrous/semi-ui-vue';

    const onClick = () => {
        console.log('float button clicked');
    };
</script>

<template>
    <span>基本使用：页面右下第三列 1 </span>
    <FloatButton aria-label="AI 编辑" style="bottom: 270px" @click="onClick">
        <template #icon>
            <IconAIEditLevel1 />
        </template>
    </FloatButton>
</template>

Size

Three sizes are supported: default, small, large.

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

Code

<script setup lang="ts">
    import { IconAIEditLevel1 } from '@fibrous/semi-icons-vue';
    import { FloatButton } from '@fibrous/semi-ui-vue';

    const onClick = () => {
        console.log('float button clicked');
    };
</script>

<template>
    <span>大尺寸：页面右下第三列 2</span>
    <FloatButton aria-label="AI 编辑" size="large" style="bottom: 200px" @click="onClick">
        <template #icon>
            <IconAIEditLevel1 />
        </template>
    </FloatButton>
</template>

Shape

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

方形：页面右下第三列 3

Code

<script setup lang="ts">
    import { IconAIEditLevel1 } from '@fibrous/semi-icons-vue';
    import { FloatButton } from '@fibrous/semi-ui-vue';

    const onClick = () => {
        console.log('float button clicked');
    };
</script>

<template>
    <span>方形：页面右下第三列 3</span>
    <FloatButton aria-label="AI 编辑" shape="square" style="bottom: 150px" @click="onClick">
        <template #icon>
            <IconAIEditLevel1 />
        </template>
    </FloatButton>
</template>

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

<script setup lang="ts">
    import { IconAIEditLevel1 } from '@fibrous/semi-icons-vue';
    import { FloatButton } from '@fibrous/semi-ui-vue';
</script>

<template>
    <span>点击跳转：页面右下第三列 4</span>
    <FloatButton aria-label="访问 Semi 官网" href="https://semi.design" rel="noopener noreferrer" style="bottom: 100px" target="_blank">
        <template #icon>
            <IconAIEditLevel1 />
        </template>
    </FloatButton>
</template>

AI style - Colorful floating buttons

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

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

Code

<script setup lang="ts">
    import { IconAIEditLevel1 } from '@fibrous/semi-icons-vue';
    import { FloatButton } from '@fibrous/semi-ui-vue';
</script>

<template>
    <span>多彩按钮：页面右下第一列</span>
    <FloatButton aria-label="访问 Semi 官网" colorful href="https://semi.design" rel="noopener noreferrer" style="bottom: 110px; inset-inline-end: 150px" target="_blank">
        <template #icon>
            <IconAIEditLevel1 />
        </template>
    </FloatButton>
</template>

Badge

带徽章：页面右下第二列

Code

<script setup lang="ts">
    import { IconAIEditLevel1 } from '@fibrous/semi-icons-vue';
    import { FloatButton } from '@fibrous/semi-ui-vue';
</script>

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

Floating button Group

Subitems can be passed in via items, and their icons come from the #icon="{ item, index }" slot. 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 emits the group's click(value, event). The group's disabled disables every item.

页面右下方最后一行

帮助

Code

<script setup lang="ts">
    import { IconAIStrokedLevel3, IconHelpCircleStroked, IconSearchStroked } from '@fibrous/semi-icons-vue';
    import { FloatButtonGroup } from '@fibrous/semi-ui-vue';

    const icons = [IconAIStrokedLevel3, IconSearchStroked, IconHelpCircleStroked];

    const items = [
        { content: '编辑', value: 'editor' },
        { content: '搜索', value: 'search', disabled: true },
        { content: '帮助', value: 'help', href: 'https://semi.design', target: '_blank' },
    ];

    const onClick = (value?: string) => {
        console.log('点击了 ', value);
    };
</script>

<template>
    <span>页面右下方最后一行</span>
    <FloatButtonGroup :items="items" style="inset-inline-end: 24px; bottom: 50px" @click="onClick">
        <template #icon="{ index }">
            <component :is="icons[index]" />
        </template>
    </FloatButtonGroup>
</template>

API Reference

Props

Property	Description	Type	Default
badge	Badge props, same as Badge. class, style, onClick, onMouseenter and onMouseleave reach the Badge root element.	`FloatButtonBadge`	`semiGlobalDefault("FloatButton", "badge")`
colorful	Colorful float button.	`boolean`	`semiDefault("FloatButton", "colorful", false)`
disabled	Disabled state.	`boolean`	`semiDefault("FloatButton", "disabled", false)`
href	Link address. Renders an a element when set; a disabled link drops it.	`string`	`semiGlobalDefault("FloatButton", "href")`
rel	Relationship to the link target. Only takes effect with href.	`string`	`semiGlobalDefault("FloatButton", "rel")`
shape	Shape: round or square.	`"square" \| "round"`	`semiDefault("FloatButton", "shape", "round")`
size	Size: default, small or large.	`"small" \| "default" \| "large"`	`semiDefault("FloatButton", "size", "default")`
target	Where to display the linked URL. Only takes effect with href.	`string`	`semiGlobalDefault("FloatButton", "target")`

Events

Event	Description	Callback parameters
click	Emitted on click with the native click event. Not emitted while disabled.	`[event: MouseEvent]`

Slots

Slot	Description	Scope parameters
badgeCount	Custom badge content, in place of badge.count.	`any`
icon	Button icon.	`any`

Exposes

Name	Description	Type
None

class, style and native attributes are passed through attrs and land on the root element: <a> when href is set, otherwise <button>. click is a declared event, so it shadows a native click listener on the root and is not emitted while disabled. The type="button" and aria-disabled of the button branch cannot be overridden by attrs, and the link branch drops a passed type. Numbers in :style get no automatic px, so write strings.

FloatButtonGroupItem

Add the following parameters based on the props of FloatButton. An item's href, target, rel, disabled, class and style mean the same as on FloatButton, and listeners such as onClick live in the data; 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. The item's ref is not supported.

Properties	Instructions	Type	Default
aria-label	Accessible name of the item, required when it has only an icon	string	-
class	Class name	string \| object \| array	-
content	Text content; use the `#content` slot for richer content	string \| number	-
data-*	Custom data attributes	string	-
id	Element id	string	-
onClick	Click callback, called before the group's `click`	(event: MouseEvent) => void	-
onContextmenu	Context menu callback	(event: MouseEvent) => void	-
onMouseenter	Pointer enter callback	(event: MouseEvent) => void	-
onMouseleave	Pointer leave callback	(event: MouseEvent) => void	-
style	Style	string \| object \| array	-
title	Native title attribute	string	-
value	Value of the item, the first payload of the `click` event	string	-

FloatButtonGroup

Props

Property	Description	Type	Default
disabled	Disables every item.	`boolean`	`semiDefault("FloatButtonGroup", "disabled", false)`
items	List of items.	`FloatButtonGroupItem[]`	`undefined`

Events

Event	Description	Callback parameters
click	Emitted when an enabled item is clicked, with the item's value (undefined if unset) and the native click event. The item's own onClick runs first.	`[value: string \| undefined, event: MouseEvent]`

Slots

Slot	Description	Scope parameters
badgeCount	Custom badge content of an item, receiving item and index.	`FloatButtonGroupItemSlotProps`
content	Custom content of an item, receiving item and index. Defaults to item.content.	`FloatButtonGroupItemSlotProps`
icon	Icon of an item, receiving item and index.	`FloatButtonGroupItemSlotProps`

Exposes

Name	Description	Type
None

class, style and native attributes (such as aria-*) land on the root element (role="group") through attrs. The icon, node-typed content and node-typed badge.count of items come from the #icon, #content and #badgeCount scoped slots, which receive { item, index }.

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