## ButtonGroup 按钮组
多个按钮组合使用
![](https://img.kancloud.cn/89/d7/89d71616c4d7acaff77bfb5b6be93161_701x91.png =400x)
### 代码示例
基础用法
```html
<cvu-button-group>
<cvu-button>首页</cvu-button>
<cvu-button>上一页</cvu-button>
<cvu-button>下一页</cvu-button>
<cvu-button>尾页</cvu-button>
</cvu-button-group>
```
圆角按钮组合
![](https://img.kancloud.cn/9f/60/9f60abf2b1b7ca820f470012f9ea45d8_628x91.png =400x)
```html
<cvu-button-group shape="circle">
<cvu-button type="primary" icon="md-build"></cvu-button>
<cvu-button type="primary" icon="md-cloud-download"></cvu-button>
<cvu-button type="primary" icon="md-trash"></cvu-button>
<cvu-button type="primary" icon="md-close"></cvu-button>
</cvu-button-group>
```
按钮组纵向排列
![](https://img.kancloud.cn/b5/17/b517b9872e830ed534ce1f44f68dabe4_919x258.png =400x)
```html
<cvu-button-group vertical>
<cvu-button icon="logo-facebook"></cvu-button>
<cvu-button icon="logo-twitter"></cvu-button>
<cvu-button icon="logo-googleplus"></cvu-button>
<cvu-button icon="logo-tumblr"></cvu-button>
</cvu-button-group>
```
### props
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| size | 按钮组合大小,可选值为`large`、`small`、`default`或者不设置 | String | default |
| shape | 按钮组合形状,可选值为`circle`或者不设置 | String | \- |
| vertical | 是否纵向排列按钮组 | Boolean | false |
### slots
| 名称 | 说明 |
| --- | --- |
| 无 | 插入按钮 |
- 介绍
- 安装
- 快速上手
- 组件
- 基础
- Button 按钮
- ButtonGroup 按钮组
- 布局
- Card 卡片
- Col 列
- Collapse 折叠面板
- Divider 分割线
- Empty 空数据
- Row 行
- 导航
- Paginator 分页
- PaginatorMini 分页
- Tab 标签页
- 表单
- Cascader 级联选择
- PasswordStrength 密码强度
- Print 局部打印
- Table 表格
- Upload 文件上传
- 视图
- Calendar 日历
- Drawer 抽屉
- Loading 加载
- Message 全局提示
- Modal 对话框
- Notification 通知菜单
- Poptip 气泡提示
- Preview 图片预览
- PreviewPdf pdf文件预览
- Tooltip 文字提示
- Tree 树形控件
- 方法
- Copy 复制到剪贴板
- DescNotice 桌面消息通知
- Html2Pdf 导出pdf
- Storage 定时存储
- 其他
- BackTop 返回顶部
- NumberScroll 数字动画
- NumberZero 数字前补零
- Spin 局部加载
- Tcplayer 播放器