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" 把它锁在容器内，方便演示。

<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>

<CfFloatButton tooltip="Contact support" badge="3" bottom={24} right={24} variant="primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8..." />
</svg>
</CfFloatButton>

<CfFloatButton tooltip="Contact support" badge="3" bottom={24} right={24} variant="primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8..." />
</svg>
</CfFloatButton>

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.