Components · Button
下载

组件

Button 按钮

按钮与链接式按钮；扁平直角，多风格、多尺寸、禁用态；:focus-visible 键盘焦点环。

变体

实心、描边、幽灵、危险及语义色（success / warning / info / secondary）。

<div class="pvs-cluster pvs-flex-wrap">
  <button type="button" class="pvs-btn pvs-btn--primary">Primary</button>
  <button type="button" class="pvs-btn pvs-btn--outline">Outline</button>
  <button type="button" class="pvs-btn pvs-btn--ghost">Ghost</button>
  <button type="button" class="pvs-btn pvs-btn--secondary">Secondary</button>
  <button type="button" class="pvs-btn pvs-btn--success">Success</button>
  <button type="button" class="pvs-btn pvs-btn--warning">Warning</button>
  <button type="button" class="pvs-btn pvs-btn--info">Info</button>
  <button type="button" class="pvs-btn pvs-btn--danger">Danger</button>
</div>

尺寸

<div class="pvs-cluster pvs-items-center">
  <button type="button" class="pvs-btn pvs-btn--primary pvs-btn--sm">Small</button>
  <button type="button" class="pvs-btn pvs-btn--primary">Default</button>
  <button type="button" class="pvs-btn pvs-btn--primary pvs-btn--lg">Large</button>
</div>

禁用态

原生 disabled 或类 pvs-btn--disabled（用于 <a>）。

链接禁用
<div class="pvs-cluster">
  <button type="button" class="pvs-btn pvs-btn--primary" disabled>Disabled</button>
  <a class="pvs-btn pvs-btn--outline pvs-btn--disabled" href="#" role="button" aria-disabled="true">链接禁用</a>
</div>

a.pvs-btn 呈现为按钮外观的链接。

链接式主按钮
<a class="pvs-btn pvs-btn--primary" href="#">链接式主按钮</a>

Button group

pvs-btn-group 合并相邻按钮边框；--vertical 竖排。

<div class="pvs-cluster pvs-flex-wrap pvs-gap-4">
  <div class="pvs-btn-group" role="group" aria-label="对齐">
    <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">左</button>
    <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm is-active">中</button>
    <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">右</button>
  </div>
  <div class="pvs-btn-group pvs-btn-group--vertical" role="group" aria-label="操作">
    <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm">上</button>
    <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm">下</button>
  </div>
</div>

Outline semantic

pvs-btn--outline-success 等描边语义色，hover 铺 muted 底。

<div class="pvs-cluster pvs-flex-wrap">
  <button type="button" class="pvs-btn pvs-btn--outline-success pvs-btn--sm">Success</button>
  <button type="button" class="pvs-btn pvs-btn--outline-warning pvs-btn--sm">Warning</button>
  <button type="button" class="pvs-btn pvs-btn--outline-danger pvs-btn--sm">Danger</button>
  <button type="button" class="pvs-btn pvs-btn--outline-info pvs-btn--sm">Info</button>
</div>

Toolbar

pvs-btn-toolbar 多组按钮横向工具栏。

<div class="pvs-btn-toolbar">
  <div class="pvs-btn-group" role="group">
    <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">粗体</button>
    <button type="button" class="pvs-btn pvs-btn--outline pvs-btn--sm">斜体</button>
  </div>
  <div class="pvs-btn-group" role="group">
    <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm">左</button>
    <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm">右</button>
  </div>
  <button type="button" class="pvs-btn pvs-btn--primary pvs-btn--sm">保存</button>
</div>

类名速查

类名说明
pvs-btn根类
pvs-btn--primary / --outline / --ghost / --danger风格
pvs-btn--secondary / --success / --warning / --info语义色实心
pvs-btn--outline-success / -warning / -danger / -info描边语义色
pvs-btn--sm / --lg尺寸
pvs-btn-group / --vertical按钮组
pvs-btn-toolbar工具栏容器
disabled / pvs-btn--disabled禁用
:focus-visible键盘焦点环