# Button 按钮
# 基础用法
点击查看代码
<nb-button>默认按钮</nb-button>
<nb-button type="primary">主要按钮</nb-button>
<nb-button type="success">成功按钮</nb-button>
<nb-button type="warning">警告按钮</nb-button>
<nb-button type="info">信息按钮</nb-button>
<nb-button type="danger">危险按钮</nb-button>
<nb-button plain>朴素按钮</nb-button>
<nb-button plain type="primary">主要按钮</nb-button>
<nb-button plain type="success">成功按钮</nb-button>
<nb-button plain type="warning">警告按钮</nb-button>
<nb-button plain type="info">信息按钮</nb-button>
<nb-button plain type="danger">危险按钮</nb-button>
<nb-button round>圆角按钮</nb-button>
<nb-button round type="primary">主要按钮</nb-button>
<nb-button round type="success">成功按钮</nb-button>
<nb-button round type="warning">警告按钮</nb-button>
<nb-button round type="info">信息按钮</nb-button>
<nb-button round type="danger">危险按钮</nb-button>
<nb-button circle icon="nb-icon-search"></nb-button>
<nb-button circle icon="nb-icon-edit" type="primary"></nb-button>
<nb-button circle icon="nb-icon-check" type="success"></nb-button>
<nb-button circle icon="nb-icon-message" type="warning"></nb-button>
<nb-button circle icon="nb-icon-star-off" type="info"></nb-button>
<nb-button circle icon="nb-icon-delete" type="danger"></nb-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 禁用状态
点击查看代码
<nb-button disabled>默认按钮</nb-button>
<nb-button disabled type="primary">主要按钮</nb-button>
<nb-button disabled type="success">成功按钮</nb-button>
<nb-button disabled type="warning">警告按钮</nb-button>
<nb-button disabled type="info">信息按钮</nb-button>
<nb-button disabled type="danger">危险按钮</nb-button>
<nb-button disabled plain>朴素按钮</nb-button>
<nb-button disabled plain type="primary">主要按钮</nb-button>
<nb-button disabled plain type="success">成功按钮</nb-button>
<nb-button disabled plain type="warning">警告按钮</nb-button>
<nb-button disabled plain type="info">信息按钮</nb-button>
<nb-button disabled plain type="danger">危险按钮</nb-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 图标按钮
点击查看代码
<nb-button type="primary" icon="nb-icon-edit"></nb-button>
<nb-button type="primary" icon="nb-icon-share"></nb-button>
<nb-button type="primary" icon="nb-icon-refresh"></nb-button>
<nb-button type="primary" icon="nb-icon-search">搜索</nb-button>
<nb-button type="primary">上传
<i class="nb-icon-upload nb-icon--right"></i>
</nb-button>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 加载按钮
点击查看代码
<nb-button type="primary" loading></nb-button>
<nb-button
type="primary"
icon="nb-icon-circle-o-notch nb-icon-spin"
></nb-button>
<nb-button type="primary" loading>加载中</nb-button>
1
2
3
4
5
6
2
3
4
5
6
# 动画按钮
点击查看代码
<nb-button animate="grow"></nb-button>
<nb-button animate="shrink" type="primary"></nb-button>
<nb-button animate="pulse" type="success"></nb-button>
<nb-button animate="pulse-grow" type="warning"></nb-button>
<nb-button animate="pulse-shrink" type="info"></nb-button>
<nb-button animate="push" type="danger"></nb-button>
<nb-button animate="pop"></nb-button>
<nb-button animate="bounce-in" type="primary"></nb-button>
<nb-button animate="bounce-out" type="success"></nb-button>
<nb-button animate="rotate" type="warning"></nb-button>
<nb-button animate="grow-rotate" type="info"></nb-button>
<nb-button animate="float" type="danger"></nb-button>
<nb-button plain animate="sink"></nb-button>
<nb-button plain animate="bob" type="primary"></nb-button>
<nb-button plain animate="hang" type="success"></nb-button>
<nb-button plain animate="skew" type="warning"></nb-button>
<nb-button plain animate="skew-forward" type="info"></nb-button>
<nb-button plain animate="skew-backward" type="danger"></nb-button>
<nb-button plain round animate="wobble-horizontal"></nb-button>
<nb-button plain round animate="wobble-vertical" type="primary"></nb-button>
<nb-button plain round animate="wobble-top" type="success"></nb-button>
<nb-button plain round animate="wobble-bottom" type="success"></nb-button>
<nb-button plain round animate="wobble-to-top-right" type="success"></nb-button>
<nb-button plain round animate="buzz" type="warning"></nb-button>
<nb-button plain round animate="wobble-skew" type="info"></nb-button>
<nb-button plain round animate="buzz-out" type="danger"></nb-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 类型 | string | primary / success / warning / danger / info | — |
| plain | 是否朴素按钮 | boolean | — | false |
| round | 是否圆角按钮 | boolean | — | false |
| circle | 是否圆形按钮 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标类名 | string | nb-icon-图标名 （Icon 图标） | false |
| loading | 是否加载中状态 | boolean | nb-icon-图标名 （Icon 图标） | — |
| animate | 按钮动画 | string | 动画名：grow / shrink / pulse / pulse-grow 等 | — |
# Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| click | 点击调用 | function | --- |