Components

Toggle / ToggleGroup

按压态工具按钮：单个开关与互斥分组两种形态。

Toggle 按钮组

pressed 状态反色，适合富文本工具栏。

<div class="flex items-center gap-2">
  <Toggle v-model="left"><AlignLeft class="h-4 w-4" /></Toggle>
  <Toggle v-model="center"><AlignCenter class="h-4 w-4" /></Toggle>
  <Toggle v-model="right"><AlignRight class="h-4 w-4" /></Toggle>
  <Separator orientation="vertical" class="mx-1 h-6" />
  <Toggle v-model="bold" size="sm"><Bold class="h-3.5 w-3.5" /></Toggle>
  <Toggle v-model="italic" size="sm"><Italic class="h-3.5 w-3.5" /></Toggle>
</div>

ToggleGroup 互斥分组

单值互斥，选中项浮起白底。

<ToggleGroup v-model="view" :options="[
  { label: '网格', value: 'grid' },
  { label: '列表', value: 'list' },
  { label: '拓扑', value: 'topo' }
]" />

API 参考

属性	类型	默认值	说明
`model-value (Toggle)`	`boolean`	`false`	按压态。
`size`	`'sm' \| 'md' \| 'lg'`	`md`	方形按钮尺寸。
`model-value (ToggleGroup)`	`string`	`—`	选中项 value。
`options`	`{ label, value, icon?, disabled? }[]`	`—`	分组选项。