按钮(button)在任何交互设计中都是非常重要的元件，一个好的交互按钮设计，可以大大增强界面的交互体验。
通过在特定元素上添加.v-btn类，可以设置一个基本的按钮。
<a>锚点链接<button>表单按钮<input type="submit">提交按钮<input type="reset">重设按钮
/* 锚点按钮不具备聚焦(:focus)轮廓 */
<a class="v-btn">Basic Anchor Button</a>
<button class="v-btn">Basic Button</button>
Basic Anchor Button
Basic Button
- 灰色系按钮
<a class="v-btn is-white">White</a>
<a class="v-btn is-light">Light</a>
<a class="v-btn is-dark">Dark</a>
<a class="v-btn is-black">Black</a>
<a class="v-btn is-link">Link</a>
White
Light
Dark
Black
Link
- 带色系按钮
<a class="v-btn is-primary">Primary</a>
<a class="v-btn is-info">Info</a>
<a class="v-btn is-success">Success</a>
<a class="v-btn is-warning">Warning</a>
<a class="v-btn is-danger">Danger</a>
Primary
Info
Success
Warning
Danger
<a class="v-btn is-small">Small</a>
<a class="v-btn">Normal</a>
<a class="v-btn is-medium">Medium</a>
<a class="v-btn is-large">Large</a>
Small
Normal
Medium
Large
- 轮廓按钮
<a class="v-btn is-outlined">Outlined</a>
<a class="v-btn is-primary is-outlined">Outlined</a>
<a class="v-btn is-info is-outlined">Outlined</a>
<a class="v-btn is-success is-outlined">Outlined</a>
<a class="v-btn is-danger is-outlined">Outlined</a>
Outlined
Outlined
Outlined
Outlined
Outlined
由于 warning的主题色太亮，该风格轮廓按钮不建议使用 .
- 正常(normal) - 悬停(hover) - 激活(active) - 聚焦(focus)
<a class="v-btn">Normal</a>
<a class="v-btn is-hovered">Hover</a>
<a class="v-btn is-active">Active</a>
<a class="v-btn is-focused">Focus</a>
<a class="v-btn is-loading">Loading</a>
<a class="v-btn is-loading" disabled>Disabled</a>
<a class="v-btn is-loading is-disabled">Disabled Class</a>
Normal
Normal
Normal
Normal
Normal
Normal
Hover
Hover
Hover
Hover
Hover
Hover
Focus
Focus
Focus
Focus
Focus
Focus
Active
Active
Active
Active
Active
Active
Loading
Loading
Loading
Loading
Loading
Loading
Disabled
Disabled
Disabled
Disabled
Disabled
Disabled
通过组合适当的修饰符，已支持了如下一些特定功能
<a class="v-btn">
<span class="has-icon">
<i class="fa fa-github"></i>
</span>
<span>GitHub</span>
</a>
<a class="v-btn is-primary">
<span class="has-icon">
<i class="fa fa-chrome fa-lg"></i>
</span>
<span>Chrome</span>
</a>
GitHub
Chrome
Grouped按钮组是单行按钮布局(Base on Flex)，主要由v-field容器修饰符is-grouped来控制v-control容器布局做到的，这两个容器是必须的 .
<div class="v-field is-grouped">
<p class="v-control">
<a class="v-btn is-primary">Submit</a>
</p>
<p class="v-control is-expanded">
<a class="v-btn">Cancel</a>
</p>
</div>Biu Biu ...
Power off
详细的 v-field, v-control 用法说明以及设计概要将会在 Form 章节中讲解 .
Addon主要由v-field容器修饰符has-addons来控制v-control容器样式做到的，这两个容器是必须的 .
<div class="v-field has-addons has-addons-centered">
<p class="v-control">
<a class="v-btn"><span class="has-icon"><i class="fa fa-backward"></i></span></a>
</p>
<p class="v-control">
<a class="v-btn">
<span class="has-icon has-text-danger"><i class="fa fa-play"></i></span>
<span>Play</span>
</a>
</p>
...
</div>Back
Play
Next