按钮

像任意标签设定 class="bny-btn" 即可渲染为按钮; 此外, 还可以通过 color 属性指定按钮颜色; 同时, 还可以通过 disabled 属性禁用按钮;

普通按钮

  • Preview
  • Code


<button class="bny-btn">按钮</button>
<button class="bny-btn" color="green">按钮</button>
<button class="bny-btn" color="blue">按钮</button>
<button class="bny-btn" color="yellow">按钮</button>
<button class="bny-btn" color="red">按钮</button>
<br>
<br>
<button class="bny-btn" disabled>按钮</button>
<button class="bny-btn" disabled color="green">按钮</button>
<button class="bny-btn" disabled color="blue">按钮</button>
<button class="bny-btn" disabled color="yellow">按钮</button>
<button class="bny-btn" disabled color="red">按钮</button>

边框按钮

  • Preview
  • Code


<button class="bny-btn" model="border">按钮</button>
<button class="bny-btn" model="border" color="green">按钮</button>
<button class="bny-btn" model="border" color="blue">按钮</button>
<button class="bny-btn" model="border" color="yellow">按钮</button>
<button class="bny-btn" model="border" color="red">按钮</button>
<br>
<br>
<button class="bny-btn" model="border" disabled>按钮</button>
<button class="bny-btn" model="border" disabled color="green">按钮</button>
<button class="bny-btn" model="border" disabled color="blue">按钮</button>
<button class="bny-btn" model="border" disabled color="yellow">按钮</button>
<button class="bny-btn" model="border" disabled color="red">按钮</button>

组合按钮

  • Preview
  • Code
<div class="bny-btn-group">
    <button class="bny-btn" model="border">按钮</button>
    <button class="bny-btn" model="border">按钮</button>
</div>
<div class="bny-btn-group">
    <button class="bny-btn" model="border" color="blue">按钮</button>
    <button class="bny-btn" model="border" color="blue">
        <i class="bny-icon">&#xe859;</i>
    </button>
</div>
<div class="bny-btn-group">
    <button class="bny-btn" model="border" color="yellow">按钮</button>
    <button class="bny-btn" model="border" color="yellow">按钮</button>
    <button class="bny-btn" model="border" color="yellow">按钮</button>
</div>
<div class="bny-btn-group">
    <button class="bny-btn" color="green">按钮</button>
    <button class="bny-btn" color="green">按钮</button>
</div>

圆形按钮

  • Preview
  • Code


<button class="bny-btn" model="circle">
    <i class="bny-icon icon-github-fill"></i>
</button>
<button class="bny-btn" model="circle" color="green">
    <i class="bny-icon icon-github-fill"></i>
</button>
<button class="bny-btn" model="circle" color="blue">
    <i class="bny-icon icon-github-fill"></i>
</button>
<button class="bny-btn" model="circle" color="yellow">
    <i class="bny-icon icon-github-fill"></i>
</button>
<button class="bny-btn" model="circle" color="red">
    <i class="bny-icon icon-github-fill"></i>
</button>
<br>
<br>
<button class="bny-btn" model="border circle">
    <i class="bny-icon icon-github-fill"></i>
</button>
<button class="bny-btn" model="border circle" color="green">
    <i class="bny-icon icon-github-fill"></i>
</button>
<button class="bny-btn" model="border circle" color="blue">
    <i class="bny-icon icon-github-fill"></i>
</button>
<button class="bny-btn" model="border circle" color="yellow">
    <i class="bny-icon icon-github-fill"></i>
</button>
<button class="bny-btn" model="border circle" color="red">
    <i class="bny-icon icon-github-fill"></i>
</button>

Loading 状态（HTMX 自动）

  • Preview
  • Code
<!-- 与 htmx 集成：请求期间自动添加 .bny-loading -->
<button class="bny-btn" hx-get="/api/...">默认 loading</button>

<!-- 不同颜色 -->
<button class="bny-btn" color="blue" hx-get="/api/...">蓝色 loading</button>

<!-- 边框按钮 -->
<button class="bny-btn" model="border" hx-get="/api/...">边框 loading</button>

<!-- 显式关闭 loading -->
<button class="bny-btn" bny-button-loading="false" hx-get="/api/...">关闭 loading</button>

<!-- 全局关闭 loading（在 body 上设置）-->
<body data-bny-button-loading-auto="false">

API

标签属性

属性 默认值 必须 描述 版本
class bny-btn 是 按钮类名
color 否 标签颜色:'green','blue','yellow','red'
disabled false 否 是否禁用按钮
model 无 否 按钮模型:'border','circle'