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.

背景

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

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

背景

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

<CfToolbar orientation="vertical">…</CfToolbar>
<CfToolbar variant="plain">…</CfToolbar>

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.