Button

Requires:

@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

Valid Values

`size`

Value	Description	Since
`default`	Default size	-
`mini`	Small size	-

`type`

Value	Description	Since
`default`	Default button	-
`primary`	Primary action button	-
`warn`	Warning action button	-

`formType`

Value	Description	Since
`submit`	Submit the form and trigger the Form onSubmit callback	-
`reset`	Reset the form and trigger the Form onReset callback	-

Examples

Basic usage

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

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

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

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

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>
  );
}