Button 按钮

用于触发操作的常用组件。

基础用法

<!-- 基础用法 -->
<button class="t-btn">默认按钮</button>
<button class="t-btn t-btn-primary">主要按钮</button>
<button class="t-btn t-btn-success">成功按钮</button>
<button class="t-btn t-btn-warning">警告按钮</button>
<button class="t-btn t-btn-danger">危险按钮</button>

朴素按钮

<!-- 朴素按钮 -->
<button class="t-btn t-btn-plain">朴素按钮</button>
<button class="t-btn t-btn-plain t-btn-primary">主要按钮</button>
<button class="t-btn t-btn-plain t-btn-success">成功按钮</button>
<button class="t-btn t-btn-plain t-btn-warning">警告按钮</button>
<button class="t-btn t-btn-plain t-btn-danger">危险按钮</button>

圆角按钮

<!-- 圆角按钮 -->
<button class="t-btn t-btn-round">圆角按钮</button>
<button class="t-btn t-btn-round t-btn-primary">主要按钮</button>
<button class="t-btn t-btn-round t-btn-success">成功按钮</button>

圆形按钮

<!-- 圆形按钮 -->
<button class="t-btn t-btn-circle">🔍</button>
<button class="t-btn t-btn-circle t-btn-primary">✚</button>
<button class="t-btn t-btn-circle t-btn-success">✓</button>
<button class="t-btn t-btn-circle t-btn-warning">⚠</button>
<button class="t-btn t-btn-circle t-btn-danger">✕</button>

不同尺寸

<!-- 不同尺寸 -->
<button class="t-btn t-btn-lg">大型按钮</button>
<button class="t-btn">默认按钮</button>
<button class="t-btn t-btn-sm">小型按钮</button>
<button class="t-btn t-btn-mini">超小按钮</button>

禁用状态

禁用状态

加载中

图标按钮

按钮组

<!-- 禁用状态 -->
<button class="t-btn" disabled>禁用按钮</button>
<button class="t-btn t-btn-primary" disabled>禁用主要</button>
<button class="t-btn t-btn-plain" disabled>禁用朴素</button>

<!-- 加载中 -->
<button class="t-btn t-btn-loading" disabled>
  <span class="t-btn-loading-icon"></span>
  加载中
</button>
<button class="t-btn t-btn-primary t-btn-loading" disabled>
  <span class="t-btn-loading-icon"></span>
  加载中
</button>

<!-- 图标按钮 -->
<button class="t-btn">
  <span class="t-btn-icon">🔍</span>
  搜索
</button>
<button class="t-btn t-btn-primary">
  <span class="t-btn-icon">✚</span>
  新增
</button>
<button class="t-btn t-btn-success">
  <span class="t-btn-icon">✓</span>
  确认
</button>

<!-- 按钮组 -->
<div class="t-btn-group">
  <button class="t-btn">上一页</button>
  <button class="t-btn">下一页</button>
</div>
<div class="t-btn-group">
  <button class="t-btn t-btn-primary">新增</button>
  <button class="t-btn t-btn-primary">编辑</button>
  <button class="t-btn t-btn-primary">删除</button>
</div>