Preview Updated 2026-05-10

Float button

A circular button anchored to a viewport corner. Common entry point for "Contact support", "Open cart", or "New post".

Basic usage

Default position: fixed, with bottom and right set to 24px. tooltip is shown on hover via the title attribute, and badge renders a small red dot in the top-right corner.

背景视口

真实页面里 FloatButton 默认是 position: fixed，固定在视口右下；这里 demo 用 style="position: absolute" 把它锁在容器内，方便演示。

src/App.vue

<script setup lang="ts">
import { CfFloatButton } from '@chufix-design/vue';
</script>
<template>
  <div style="position: relative; height: 220px; border: 1px dashed var(--line-1); border-radius: 8px; padding: 16px;">
    <p style="margin: 0; color: var(--fg-2);">真实页面里 FloatButton 默认是 <code>position: fixed</code>，固定在视口右下；这里 demo 用 <code>style="position: absolute"</code> 把它锁在容器内，方便演示。</p>
    <CfFloatButton
      :style="{ position: 'absolute' }"
      tooltip="联系客服"
      badge="3"
      :bottom="16"
      :right="16"
      variant="primary"
    >
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
      </svg>
    </CfFloatButton>
  </div>
</template>

<script setup>
import { CfFloatButton } from '@chufix-design/vue';
</script>
<template>
  <div style="position: relative; height: 220px; border: 1px dashed var(--line-1); border-radius: 8px; padding: 16px;">
    <p style="margin: 0; color: var(--fg-2);">真实页面里 FloatButton 默认是 <code>position: fixed</code>，固定在视口右下；这里 demo 用 <code>style="position: absolute"</code> 把它锁在容器内，方便演示。</p>
    <CfFloatButton
      :style="{ position: 'absolute' }"
      tooltip="联系客服"
      badge="3"
      :bottom="16"
      :right="16"
      variant="primary"
    >
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
      </svg>
    </CfFloatButton>
  </div>
</template>

import { CfFloatButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div style={{ position: "relative", height: 220, border: "1px dashed var(--line-1)", borderRadius: 8, padding: 16 }}>
          <p style={{ margin: 0, color: "var(--fg-2)" }}>真实页面里 FloatButton 默认是 <code>position: fixed</code>，固定在视口右下；这里 demo 用 <code>style="position: absolute"</code> 把它锁在容器内，方便演示。</p>
          <CfFloatButton style={{ position: 'absolute' }} tooltip="联系客服" badge="3" bottom={16} right={16} variant="primary" >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
            </svg>
          </CfFloatButton>
        </div>
    </>
  );
}

import { CfFloatButton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div style={{ position: "relative", height: 220, border: "1px dashed var(--line-1)", borderRadius: 8, padding: 16 }}>
          <p style={{ margin: 0, color: "var(--fg-2)" }}>真实页面里 FloatButton 默认是 <code>position: fixed</code>，固定在视口右下；这里 demo 用 <code>style="position: absolute"</code> 把它锁在容器内，方便演示。</p>
          <CfFloatButton style={{ position: 'absolute' }} tooltip="联系客服" badge="3" bottom={16} right={16} variant="primary" >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
            </svg>
          </CfFloatButton>
        </div>
    </>
  );
}

API

Prop	Type	Default	Description
`shape`	`'circle' \| 'square'`	`'circle'`	Button shape
`variant`	`'default' \| 'primary'`	`'default'`	Visual emphasis
`tooltip`	`string`	`—`	Hover hint text (rendered via `title`)
`badge`	`string \| number`	`—`	Top-right badge text; not shown when empty
`bottom` / `right` / `top` / `left`	`number`	`bottom: 24, right: 24`	Viewport offset; same as CSS
`ariaLabel`	`string`	same as `tooltip`	Screen-reader label

Events: onClick(evt) — button click.