Preview Updated 2026-05-10

Toolbar

Horizontal button-group container with separators, vertical orientation, and 3 sizes.

Basic usage

CfToolbar is a semantic container for a button group; CfToolbarSeparator draws a thin line between buttons. role="toolbar" is applied automatically.

背景

src/App.vue

<script setup lang="ts">
import { CfToolbar, CfToolbarSeparator, CfIconButton, CfButton } from '@chufix-design/vue';
</script>
<template>
  <CfToolbar>
    <CfIconButton aria-label="撤销">↶</CfIconButton>
    <CfIconButton aria-label="重做">↷</CfIconButton>
    <CfToolbarSeparator />
    <CfButton variant="ghost" size="sm">Duplicate</CfButton>
    <CfButton variant="ghost" size="sm">Delete</CfButton>
  </CfToolbar>
</template>

<script setup>
import { CfToolbar, CfToolbarSeparator, CfIconButton, CfButton } from '@chufix-design/vue';
</script>
<template>
  <CfToolbar>
    <CfIconButton aria-label="撤销">↶</CfIconButton>
    <CfIconButton aria-label="重做">↷</CfIconButton>
    <CfToolbarSeparator />
    <CfButton variant="ghost" size="sm">Duplicate</CfButton>
    <CfButton variant="ghost" size="sm">Delete</CfButton>
  </CfToolbar>
</template>

import { CfButton, CfIconButton, CfToolbar, CfToolbarSeparator } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfToolbar>
      <CfIconButton aria-label="Undo">↶</CfIconButton>
      <CfIconButton aria-label="Redo">↷</CfIconButton>
      <CfToolbarSeparator />
      <CfButton variant="ghost" size="sm">Duplicate</CfButton>
      <CfButton variant="ghost" size="sm">Delete</CfButton>
      </CfToolbar>
    </>
  );
}

import { CfButton, CfIconButton, CfToolbar, CfToolbarSeparator } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfToolbar>
      <CfIconButton aria-label="Undo">↶</CfIconButton>
      <CfIconButton aria-label="Redo">↷</CfIconButton>
      <CfToolbarSeparator />
      <CfButton variant="ghost" size="sm">Duplicate</CfButton>
      <CfButton variant="ghost" size="sm">Delete</CfButton>
      </CfToolbar>
    </>
  );
}

Orientation and variant

orientation="vertical" stacks vertically; variant="plain" removes background and border, useful as a bare button group.

背景

src/App.vue

<script setup lang="ts">
import { CfToolbar, CfToolbarSeparator, CfIconButton } from '@chufix-design/vue';
const star = `<svg viewBox="0 0 16 16" fill="none"><path d="M8 2l1.9 4 4.4.4-3.3 3 .9 4.3L8 11.5 4.1 13.7l.9-4.3-3.3-3 4.4-.4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>`;
</script>
<template>
  <div class="demo-row" style="align-items: flex-start; gap: 16px;">
    <CfToolbar orientation="vertical">
      <CfIconButton aria-label="项目 1"><span v-html="star" style="display: contents;"/></CfIconButton>
      <CfIconButton aria-label="项目 2"><span v-html="star" style="display: contents;"/></CfIconButton>
      <CfToolbarSeparator />
      <CfIconButton aria-label="项目 3"><span v-html="star" style="display: contents;"/></CfIconButton>
    </CfToolbar>
    <CfToolbar variant="plain">
      <CfIconButton aria-label="撤销">↶</CfIconButton>
      <CfIconButton aria-label="重做">↷</CfIconButton>
      <CfToolbarSeparator />
      <CfIconButton aria-label="更多">⋯</CfIconButton>
    </CfToolbar>
  </div>
</template>

<script setup>
import { CfToolbar, CfToolbarSeparator, CfIconButton } from '@chufix-design/vue';
const star = `<svg viewBox="0 0 16 16" fill="none"><path d="M8 2l1.9 4 4.4.4-3.3 3 .9 4.3L8 11.5 4.1 13.7l.9-4.3-3.3-3 4.4-.4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>`;
</script>
<template>
  <div class="demo-row" style="align-items: flex-start; gap: 16px;">
    <CfToolbar orientation="vertical">
      <CfIconButton aria-label="项目 1"><span v-html="star" style="display: contents;"/></CfIconButton>
      <CfIconButton aria-label="项目 2"><span v-html="star" style="display: contents;"/></CfIconButton>
      <CfToolbarSeparator />
      <CfIconButton aria-label="项目 3"><span v-html="star" style="display: contents;"/></CfIconButton>
    </CfToolbar>
    <CfToolbar variant="plain">
      <CfIconButton aria-label="撤销">↶</CfIconButton>
      <CfIconButton aria-label="重做">↷</CfIconButton>
      <CfToolbarSeparator />
      <CfIconButton aria-label="更多">⋯</CfIconButton>
    </CfToolbar>
  </div>
</template>

import { CfIconButton, CfToolbar, CfToolbarSeparator } from '@chufix-design/react';

export default function Demo() {
  const star = `<svg viewBox="0 0 16 16" fill="none"><path d="M8 2l1.9 4 4.4.4-3.3 3 .9 4.3L8 11.5 4.1 13.7l.9-4.3-3.3-3 4.4-.4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>`;
  return (
    <>
      <div className="demo-row" style={{ alignItems: "flex-start", gap: 16 }}>
          <CfToolbar orientation="vertical">
            <CfIconButton aria-label="项目 1"><span v-html="star" style={{ display: "contents" }}/></CfIconButton>
            <CfIconButton aria-label="项目 2"><span v-html="star" style={{ display: "contents" }}/></CfIconButton>
            <CfToolbarSeparator />
            <CfIconButton aria-label="项目 3"><span v-html="star" style={{ display: "contents" }}/></CfIconButton>
          </CfToolbar>
          <CfToolbar variant="plain">
            <CfIconButton aria-label="撤销">↶</CfIconButton>
            <CfIconButton aria-label="重做">↷</CfIconButton>
            <CfToolbarSeparator />
            <CfIconButton aria-label="更多">⋯</CfIconButton>
          </CfToolbar>
        </div>
    </>
  );
}

import { CfIconButton, CfToolbar, CfToolbarSeparator } from '@chufix-design/react';

export default function Demo() {
  const star = `<svg viewBox="0 0 16 16" fill="none"><path d="M8 2l1.9 4 4.4.4-3.3 3 .9 4.3L8 11.5 4.1 13.7l.9-4.3-3.3-3 4.4-.4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>`;
  return (
    <>
      <div className="demo-row" style={{ alignItems: "flex-start", gap: 16 }}>
          <CfToolbar orientation="vertical">
            <CfIconButton aria-label="项目 1"><span v-html="star" style={{ display: "contents" }}/></CfIconButton>
            <CfIconButton aria-label="项目 2"><span v-html="star" style={{ display: "contents" }}/></CfIconButton>
            <CfToolbarSeparator />
            <CfIconButton aria-label="项目 3"><span v-html="star" style={{ display: "contents" }}/></CfIconButton>
          </CfToolbar>
          <CfToolbar variant="plain">
            <CfIconButton aria-label="撤销">↶</CfIconButton>
            <CfIconButton aria-label="重做">↷</CfIconButton>
            <CfToolbarSeparator />
            <CfIconButton aria-label="更多">⋯</CfIconButton>
          </CfToolbar>
        </div>
    </>
  );
}

API

CfToolbar

Prop	Type	Default	Description
`variant`	`'default' \| 'plain'`	`'default'`	`plain` removes background and border
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Padding and gap
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction

CfToolbarSeparator

Takes no props; flips horizontal/vertical based on the parent toolbar’s orientation.