🎋 按钮 Button

🎈 何时使用

响应用户点击行为，引导用户完成操作时。

🧩 按钮类型

在 Bamboo Design 中，我们提供了 五种按钮类型：

• 🔵 主按钮（Primary）：页面上最重要的引导性按钮，一个区域建议只保留一个主按钮。
• ⚪️ 默认按钮（Default）：常规操作按钮。
• ⚠️ 警告按钮（Alert）：用于警告类操作，提醒用户注意。
• 🔴 危险按钮（Danger）：用于危险操作（如删除、清除），需用户谨慎操作。
• 🔗 链接按钮（Link）：用于跳转或导航行为。

⚙️ 按钮属性

属性	说明	类型	默认值
outline	是否带边框样式	boolean	false
disabled	是否禁用按钮	boolean	false
loading	是否处于加载状态	boolean	false
size	按钮尺寸，可选 s / m / l	string	m
bubble	鼠标悬浮时展示信息气泡	string	-
bubbleReverse	鼠标悬浮时展示信息气泡，方向相反	boolean	false
bubbleType	气泡类型	string	default
block	是否占据父元素宽度	boolean	false
enterAnimate	是否启用入场动画	boolean	false
thinFont	是否使用细字体	boolean	false
darkMode	是否启用暗色模式	boolean	false
href	链接按钮跳转地址（type 为 link 时生效）	string	-
newWindow	是否在新窗口打开链接（type 为 link 时生效）	boolean	false
iconType	图标类型（可选）设置后默认开启图标	string	-
iconOnly	是否仅显示图标（不显示文本）	boolean	false
reverse	是否图标在文本左侧	boolean	false

🎨 按钮类型展示

主按钮（Primary）

<bm-button type="primary">主要按钮</bm-button>

默认按钮（Default）

<bm-button>默认按钮</bm-button>

警告按钮（Alert）

<bm-button type="alert">警告按钮</bm-button>

危险按钮（Danger）

<bm-button type="danger">危险按钮</bm-button>

链接按钮（Link）

<bm-button type="link" href="https://www.baidu.com">http 链接按钮</bm-button>

⚙️ 按钮属性展示

📏 尺寸 size

<bm-button type="primary" size="s">小按钮</bm-button>
<bm-button type="primary" size="m">正常按钮</bm-button>
<bm-button type="primary" size="l">大按钮</bm-button>

🔲 边框 outline

<bm-button type="primary" outline>一个按钮</bm-button>

🚫 禁用 disabled

<bm-button type="primary" outline disabled>一个按钮</bm-button>

🔄 加载 loading

<bm-button type="primary" loading>一个按钮</bm-button>

✨ 气泡 bubble & 🎇气泡反转 bubbleReverse

<bm-button type="primary" bubble="这是一个主要按钮" bubbleReverse>主要按钮</bm-button> 
<bm-button type="alert" bubble="这是一个警告按钮"  >警告按钮</bm-button> 
<bm-button type="danger" bubble="这是一个危险按钮" bubbleReverse>危险按钮</bm-button> 
<bm-button type="default" bubble="这是一个默认按钮">默认按钮</bm-button>

🎯 气泡类型 bubbleType

<bm-button type="primary" bubble="这是一个主要按钮" bubbleType="default">主要按钮</bm-button> 
<bm-button type="alert" bubble="这是一个警告按钮" bubbleType="alert">警告按钮</bm-button> 
<bm-button type="danger" bubble="这是一个危险按钮" bubbleType="danger">危险按钮</bm-button> 
<bm-button type="default" bubble="这是一个默认按钮"  bubbleType="alert" >默认按钮</bm-button>

🙌占据父元素宽度

<bm-button type="primary" size="s" block>小按钮</bm-button>
<bm-button type="primary" size="m" block>正常按钮</bm-button>
<bm-button type="primary" size="l" block>大按钮</bm-button>

✨ 入场动画 enterAnimate

动画会在按钮挂载时触发，此处仅展示代码：

<bm-button type="primary">主要按钮</bm-button>
<bm-button type="primary" enterAnimate>主要按钮</bm-button>

⚪️ 细字体 thinFont

<bm-button type="primary" thinFont>主要按钮</bm-button>
<bm-button type="alert" thinFont>警告按钮</bm-button>
<bm-button type="danger" thinFont>危险按钮</bm-button>
<bm-button
  type="link"
  href="https://www.baidu.com"
  thinFont
>链接按钮</bm-button>

🌑 暗色模式 darkMode （开发中）

<bm-button type="primary" darkMode>主要按钮</bm-button>
<bm-button type="alert" darkMode>警告按钮</bm-button>
<bm-button type="danger" darkMode>危险按钮</bm-button>
<bm-button
  type="link"
  href="https://www.baidu.com"
  darkMode
>链接按钮</bm-button>

🔗 新窗口打开 newWindow

<bm-button type="link" href="https://www.baidu.com" newWindow>新窗口打开</bm-button>
<bm-button type="link" href="https://www.baidu.com">本地跳转</bm-button>

🎁图标 iconType

<bm-button type="primary" iconType="fa-search">图标</bm-button>
<bm-button type="primary" iconType="fa-search">图标</bm-button>
<bm-button type="primary" iconType="fa-search" size="s">图标</bm-button>
<bm-button type="primary" iconType="fa-search" size="l">图标</bm-button>

😎单图标按钮 iconOnly

<bm-button type="primary" iconType="fa-search" iconOnly>图标</bm-button>
<bm-button type="primary" iconType="fa-search" iconOnly size="s">图标</bm-button>
<bm-button type="primary" iconType="fa-search" iconOnly size="l">图标</bm-button>

🎉图标居右

<bm-button type="primary" iconType="fa-search" iconOnly reverse>图标</bm-button>
<bm-button type="primary" iconType="fa-search" iconOnly reverse size="s">图标</bm-button>
<bm-button type="primary" iconType="fa-search" iconOnly reverse size="l">图标</bm-button>