开发预览更新于 2026-05-10

Button 按钮

5 种 variant、3 种尺寸、3 种形状、loading 与 disabled 态。

基础用法

5 种视觉变体覆盖从主操作到次操作的全部层级，按视觉权重从重到轻排列。 primary 是页面唯一的主操作，danger 用于删除等不可逆操作。

<script setup lang="ts">
import { CfButton } from '@chufix-design/vue';
</script>

<template>
<CfButton variant="primary">Primary</CfButton>
<CfButton variant="secondary">Secondary</CfButton>
<CfButton variant="tertiary">Tertiary</CfButton>
<CfButton variant="ghost">Ghost</CfButton>
<CfButton variant="danger">Danger</CfButton>
</template>

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

export default function Demo() {
return (
  <>
    <CfButton variant="primary">Primary</CfButton>
    <CfButton variant="secondary">Secondary</CfButton>
    <CfButton variant="tertiary">Tertiary</CfButton>
    <CfButton variant="ghost">Ghost</CfButton>
    <CfButton variant="danger">Danger</CfButton>
  </>
);
}

尺寸与形状

3 档尺寸（sm / md / lg）适配不同信息密度；3 种形状中 pill 是胶囊形，square 是正方形（icon-only 时常用）。

<CfButton size="sm">Small</CfButton>
<CfButton size="md">Medium</CfButton>
<CfButton size="lg">Large</CfButton>

<CfButton shape="default">默认圆角</CfButton>
<CfButton shape="pill">Pill</CfButton>
<CfButton shape="square" aria-label="设置">⚙</CfButton>

<CfButton size="sm">Small</CfButton>
<CfButton size="md">Medium</CfButton>
<CfButton size="lg">Large</CfButton>

<CfButton shape="default">默认圆角</CfButton>
<CfButton shape="pill">Pill</CfButton>
<CfButton shape="square" aria-label="设置">⚙</CfButton>

状态

loading 自动渲染 spinner 并阻止点击；disabled 让按钮不可交互；block 让宽度铺满父容器。

<script setup lang="ts">
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const loading = ref(false);
async function load() {
loading.value = true;
await new Promise((r) => setTimeout(r, 1500));
loading.value = false;
}
</script>

<template>
<CfButton :loading="loading" @click="load">
  {{ loading ? '加载中…' : '点击加载' }}
</CfButton>
<CfButton disabled>Disabled</CfButton>
<CfButton block>整行铺满（block）</CfButton>
</template>

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

export default function Demo() {
const [loading, setLoading] = useState(false);
async function load() {
  setLoading(true);
  await new Promise((r) => setTimeout(r, 1500));
  setLoading(false);
}

return (
  <>
    <CfButton loading={loading} onClick={load}>
      {loading ? '加载中…' : '点击加载'}
    </CfButton>
    <CfButton disabled>Disabled</CfButton>
    <CfButton block>整行铺满（block）</CfButton>
  </>
);
}

API

Prop	类型	默认值	说明
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'ghost' \| 'danger'`	`'primary'`	视觉变体（按权重从重到轻）
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	高度与字号
`shape`	`'default' \| 'pill' \| 'square'`	`'default'`	圆角形状
`loading`	`boolean`	`false`	显示 spinner 并阻止点击
`block`	`boolean`	`false`	撑满父容器宽度
`disabled`	`boolean`	`false`	禁用

插槽 / Children

Vue：默认插槽是 label，leading / trailing 具名插槽放图标。
React：children 是 label，leading / trailing props 放图标节点。