---
name: "Button"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Button - 多端按钮基础组件，可用于进行强交互的操作"
---

## Button

> [VERSION] @ray-js/ray >= 0.5.10

### 描述

多端按钮基础组件，可用于进行强交互的操作。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `size` | `"default" \| "mini"` | 否 | `"default"` | 按钮的大小 |
| `type` | `"default" \| "primary" \| "warn"` | 否 | `"default"` | 按钮的样式类型 |
| `plain` | `boolean` | 否 | `false` | 按钮是否镂空，背景色透明 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |
| `loading` | `boolean` | 否 | `false` | 名称前是否带 loading 图标 |
| `formType` | `"submit" \| "reset"` | 否 | - | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 |
| `hoverStartTime` | `number` | 否 | `20` | 按住后多久出现点击态，单位毫秒 |
| `hoverStayTime` | `number` | 否 | `70` | 手指松开后点击态保留时间，单位毫秒 |

### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { Button, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button>默认按钮</Button>
      <Button style={{ marginTop: '10px' }}>普通按钮</Button>
    </View>
  );
}
```

#### 按钮类型

```tsx
import React from 'react';
import { Button, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button type="primary">主要按钮</Button>
      <Button type="default" style={{ marginTop: '10px' }}>
        默认按钮
      </Button>
      <Button type="warn" style={{ marginTop: '10px' }}>
        警告按钮
      </Button>
      <Button disabled> Disabled </Button>
    </View>
  );
}
```

#### 按钮尺寸

```tsx
import React from 'react';
import { Button, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button size="default">默认尺寸</Button>
      <Button size="mini" style={{ marginTop: '10px' }}>
        迷你尺寸
      </Button>
    </View>
  );
}
```

#### 按钮状态

```tsx
import React from 'react';
import { Button, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button loading>加载中</Button>
      <Button disabled style={{ marginTop: '10px' }}>
        禁用状态
      </Button>
      <Button plain type="primary" style={{ marginTop: '10px' }}>
        镂空按钮
      </Button>
    </View>
  );
}
```

#### Hover 点击态与表单

```tsx
import React from 'react';
import { Button, Form, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button
        hoverStartTime={50}
        hoverStayTime={200}
      >
        自定义 Hover 效果
      </Button>
      <Form
        onSubmit={(e) => console.log('提交:', e.detail.value)}
        onReset={() => console.log('重置')}
      >
        <Button formType="submit" type="primary" style={{ marginTop: '10px' }}>
          提交表单
        </Button>
        <Button formType="reset" style={{ marginTop: '10px' }}>
          重置表单
        </Button>
      </Form>
    </View>
  );
}
```