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.
Demo source
<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><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.
Demo source
<CfToolbar orientation="vertical">…</CfToolbar>
<CfToolbar variant="plain">…</CfToolbar><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.
反馈与讨论
Toolbar · Discussion