Button 按钮

按钮组件用于触发一个即时操作，支持多种样式和状态。

适用场景：需要一个开箱即用、自带 primary/contrast/warning/text 样式以及禁用、图标支持的可点击操作控件时——用 <r-button> 代替手写 <button> 样式。

快速开始

基础用法

Button

<r-button>Button</r-button>

API 参考

属性

属性	类型	默认值	说明
type	string	'default'	按钮类型：default、primary、contrast、warning、text
disabled	boolean	false	是否禁用按钮
icon	string	''	按钮图标名称
effect	boolean	true	是否显示点击水波纹特效

按钮类型 type

按钮支持五种不同的类型，适用于不同的场景

主要按钮警告按钮文本按钮默认按钮

<r-button type="primary">主要按钮</r-button>
<r-button type="warning">警告按钮</r-button>
<r-button type="text">文本按钮</r-button>
<r-button>默认按钮</r-button>

primary 是单色（无彩色）操作按钮，来自 Geist 设计语言：浅色模式下黑底白字，深色模式下白底黑字。蓝色在此不承载品牌含义——它只保留给链接和聚焦环。它消费 --ran-color-primary* 令牌（--ran-color-primary、-hover、-active，以及作为反色墨水的 --ran-color-primary-text）——参见 Theme 主题与令牌。

禁用状态 disabled

添加 disabled 属性可以让按钮处于不可用状态，同时按钮样式也会相应改变

主要按钮警告按钮文本按钮默认按钮

<r-button type="primary" disabled>主要按钮</r-button>
<r-button type="warning" disabled>警告按钮</r-button>
<r-button type="text" disabled>文本按钮</r-button>
<r-button disabled>默认按钮</r-button>

图标按钮 icon

可以通过 icon 属性为按钮添加图标，或者直接在按钮内使用 Icon 组件

💡 提示: 如果需要控制图标的具体位置，建议直接使用 Icon 组件而不是 icon 属性

默认按钮主要按钮

<r-button type="default" icon="user">默认按钮</r-button> <r-button type="primary" icon="home">主要按钮</r-button>

特效控制 effect

如果需要纯净的按钮样式，可以设置 effect="false" 来禁用点击时的水波纹特效

默认按钮主要按钮

<r-button type="default" effect="false" icon="user">默认按钮</r-button>
<r-button type="primary" effect="false" icon="home">主要按钮</r-button>

事件

点击事件

按钮支持标准的点击事件处理

<r-button onclick="handleClick()">点击我</r-button>

<script>
  function handleClick() {
    console.log('按钮被点击了');
  }
</script>

最佳实践

• 主要操作: 使用 type="primary" 的按钮（单色——浅色黑底白字 / 深色白底黑字）
• 危险操作: 使用 type="warning" 的按钮
• 次要操作: 使用 type="text" 的按钮
• 禁用状态: 在操作不可用时使用 disabled 属性
• 图标使用: 为按钮添加相关图标可以提升用户体验