FloatButton

Demos

How to import

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

Basic usage

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

Code

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

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

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

Size

Three sizes are supported: default, small, large.

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

Code

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

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

<span>大尺寸：页面右下第三列 2</span>
<FloatButton aria-label="AI 编辑" size="large" style="bottom: 200px" {onclick}>
    {#snippet icon()}
        <IconAIEditLevel1 />
    {/snippet}
</FloatButton>

Shape

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

方形：页面右下第三列 3

Code

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

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

<span>方形：页面右下第三列 3</span>
<FloatButton aria-label="AI 编辑" shape="square" style="bottom: 150px" {onclick}>
    {#snippet icon()}
        <IconAIEditLevel1 />
    {/snippet}
</FloatButton>

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 lang="ts">
    import { IconAIEditLevel1 } from '@fibrae/semi-icons-svelte';
    import { FloatButton } from '@fibrae/semi-ui-svelte';
</script>

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

AI style - Colorful floating buttons

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

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

Code

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

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

Badge

带徽章：页面右下第二列

Code

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

{#snippet icon()}
    <IconAIEditLevel1 />
{/snippet}

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

Floating button Group

Subitems can be passed in via items, and their icons come from the icon snippet, which receives { item, index }. 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

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

    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>

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

API Reference

Props

Property	Description	Type	Default
badge	Badge props, same as Badge without children. class, style, onclick, onmouseenter and onmouseleave reach the Badge root element.	`FloatButtonBadge`	-
badgeCount	Snippet for custom badge content, in place of badge.count.	`Snippet`	-
colorful	Colorful float button.	`boolean`	`false`
disabled	Disabled state.	`boolean`	`false`
href	Link address. Renders an a element when set; a disabled link drops it.	`string`	-
icon	Snippet for the button icon.	`Snippet`	-
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 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>. The click callback is the native onclick, which receives the event, and is not called while disabled. style only accepts a string, and a number does not get px added. Refs are not supported.

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 go 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. An 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	-
content	Text content; richer content uses the `content` snippet	string \| number	-
data-*	Custom data attributes	string	-
id	Element id	string	-
onClick	Click callback, called before the group's `onClick`	(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	string	-
title	Native title attribute	string	-
value	Value of the item, passed as the first argument of `onClick`	string	-

FloatButtonGroup

Props

Property	Description	Type	Default
badgeCount	Snippet for custom badge content of an item, with the argument `{ item, index }`.	`Type`	-
content	Snippet for custom content of an item, with the argument `{ item, index }`. Defaults to item.content.	`Type`	-
disabled	Disables every item.	`boolean`	`false`
icon	Snippet for the icon of an item, with the argument `{ item, index }`.	`Type`	-
items	List of items.	`FloatButtonGroupItem[]`	-
onClick	Called 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. Not called for clicks outside an item.	`Type`	-

class, style and native attributes (such as aria-*) land on the root element (role="group"). The icon, node-typed content and node-typed badge.count of items come from the icon, content and badgeCount snippets, 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