内容
按钮
按钮使用原生 <button> 标签，无需 .classes 即可获得默认样式。
查看源码
<button>Button</button>变体
按钮自带 .secondary 和 .contrast 样式（在无类版本中不可用）。
查看源码
<button class="secondary">Secondary</button>
<button class="contrast">Contrast</button>它们还带有经典的描边样式（在无类版本中不可用）。
查看源码
<button class="outline">Primary</button>
<button class="outline secondary">Secondary</button>
<button class="outline contrast">Contrast</button>表单按钮
type="submit" 和 type="button" 的 input 同样会显示为按钮。所有表单按钮默认都是 width: 100%;，以与其他表单元素保持一致。
查看源码
<input type="submit">
<input type="button" value="Input">reset input 默认使用次要样式。
查看源码
<input type="reset">禁用
按钮带有禁用样式。
查看源码
<button disabled>Disabled</button>
<button class="secondary" disabled>Disabled</button>
<button class="contrast" disabled>Disabled</button>角色按钮
带有 role="button" 的可点击元素会被渲染为按钮。
Div as button
查看源码
<div role="button" tabindex="0">Div as a button</div>配合分组使用
你可以将 role="group" 与按钮一起使用。参见分组。
查看源码
<div role="group">
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>