---
name: "Button"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Button - Cross-platform basic button component for strong interaction operations"
---

## Button

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

### Description

Cross-platform basic Button component for actions requiring strong user interaction.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `size` | `"default" \| "mini"` | No | `"default"` | Button size |
| `type` | `"default" \| "primary" \| "warn"` | No | `"default"` | Button style type |
| `plain` | `boolean` | No | `false` | Whether the button is plain (transparent background) |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `loading` | `boolean` | No | `false` | Whether to display a loading icon before the label |
| `formType` | `"submit" \| "reset"` | No | - | Used with the form component; clicking will trigger the form component’s submit/reset events |
| `hoverStartTime` | `number` | No | `20` | How long to press before the pressed state appears, in milliseconds |
| `hoverStayTime` | `number` | No | `70` | Duration the pressed state remains after the finger is released, in milliseconds |

### Examples

#### Basic usage

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

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button>Default button</Button>
      <Button style={{ marginTop: '10px' }}>Normal button</Button>
    </View>
  );
}
```

#### Button types

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

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button type="primary">Primary button</Button>
      <Button type="default" style={{ marginTop: '10px' }}>
        Default button
      </Button>
      <Button type="warn" style={{ marginTop: '10px' }}>
        Warning button
      </Button>
      <Button disabled> Disabled </Button>
    </View>
  );
}
```

#### Button sizes

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

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button size="default">Default size</Button>
      <Button size="mini" style={{ marginTop: '10px' }}>
        Mini size
      </Button>
    </View>
  );
}
```

#### Button states

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

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Button loading>Loading</Button>
      <Button disabled style={{ marginTop: '10px' }}>
        Disabled state
      </Button>
      <Button plain type="primary" style={{ marginTop: '10px' }}>
        Plain button
      </Button>
    </View>
  );
}
```

#### Hover/active state and forms

```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}
      >
        Custom Hover effect
      </Button>
      <Form
        onSubmit={(e) => console.log('Submit:', e.detail.value)}
        onReset={() => console.log('Reset')}
      >
        <Button formType="submit" type="primary" style={{ marginTop: '10px' }}>
          Submit form
        </Button>
        <Button formType="reset" style={{ marginTop: '10px' }}>
          Reset form
        </Button>
      </Form>
    </View>
  );
}
```