Preview Updated 2026-05-10

Split button

A primary button + dropdown arrow combo for related actions.

Basic usage

The main button fires click; the arrow opens the dropdown; selecting an item fires select(value, item).

背景

src/App.vue

<script setup lang="ts">
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save', value: 'save' },
  { label: 'Save as draft', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>
<template>
  <div class="demo-row">
    <CfSplitButton :items="items" @click="alert('Save')" @select="(v) => alert(`Picked: ${v}`)">
      Save
    </CfSplitButton>
    <CfSplitButton variant="secondary" :items="items">More</CfSplitButton>
    <CfSplitButton variant="danger" :items="[{label: '永久删除', value: 'delete', danger: true}]">Delete</CfSplitButton>
  </div>
</template>

<script setup>
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save', value: 'save' },
  { label: 'Save', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>
<template>
  <div class="demo-row">
    <CfSplitButton :items="items" @click="alert('Save')" @select="(v) => alert(`Picked: ${v}`)">
      Save
    </CfSplitButton>
    <CfSplitButton variant="secondary" :items="items">More</CfSplitButton>
    <CfSplitButton variant="danger" :items="[{label: '永久删除', value: 'delete', danger: true}]">Delete</CfSplitButton>
  </div>
</template>

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

export default function Demo() {
  const items = [
    { label: 'Save', value: 'save' },
    { label: 'Save as draft', value: 'draft' },
    { label: 'Save and publish', value: 'publish' },
  ];
  return (
    <>
      <CfSplitButton items={items} onClick={save} onSelect={(v) => onPick(v)}>
      Save
      </CfSplitButton>
    </>
  );
}

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

export default function Demo() {
  const items = [
    { label: 'Save', value: 'save' },
    { label: 'Save', value: 'draft' },
    { label: 'Save and publish', value: 'publish' },
  ];
  return (
    <>
      <CfSplitButton items={items} onClick={save} onSelect={(v) => onPick(v)}>
      Save
      </CfSplitButton>
    </>
  );
}

Sizes

Three sizes follow the --control-h token.

背景

src/App.vue

<script setup lang="ts">
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save as draft', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 12px;">
    <CfSplitButton size="sm" :items="items">Small</CfSplitButton>
    <CfSplitButton size="md" :items="items">Medium</CfSplitButton>
    <CfSplitButton size="lg" :items="items">Large</CfSplitButton>
  </div>
</template>

<script setup>
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 12px;">
    <CfSplitButton size="sm" :items="items">Small</CfSplitButton>
    <CfSplitButton size="md" :items="items">Medium</CfSplitButton>
    <CfSplitButton size="lg" :items="items">Large</CfSplitButton>
  </div>
</template>

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

export default function Demo() {
  const items = [
    { label: 'Save as draft', value: 'draft' },
    { label: 'Save and publish', value: 'publish' },
  ];
  return (
    <>
      <CfSplitButton size="sm" items={items}>Small</CfSplitButton>
      <CfSplitButton size="md" items={items}>Medium</CfSplitButton>
      <CfSplitButton size="lg" items={items}>Large</CfSplitButton>
    </>
  );
}

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

export default function Demo() {
  const items = [
    { label: 'Save', value: 'draft' },
    { label: 'Save and publish', value: 'publish' },
  ];
  return (
    <>
      <CfSplitButton size="sm" items={items}>Small</CfSplitButton>
      <CfSplitButton size="md" items={items}>Medium</CfSplitButton>
      <CfSplitButton size="lg" items={items}>Large</CfSplitButton>
    </>
  );
}

API

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'ghost' \| 'danger'`	`'primary'`	Reuses Button variants
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`items`	`SplitButtonItem[]`	—	Dropdown items `{ label, value, disabled?, danger? }`
`disabled` / `loading`	`boolean`	`false`

Events: click (main button), select(value, item) (dropdown item).