Button

The button is used to start an instant action.

Code demo

Button

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

Attribute

type

There are four types of buttons

Primary button

Warning button

Text button

Default button

 <r-button type="primary">Primary button</r-button>
 <r-button type="warning">Warning button</r-button>
 <r-button type="text">Text button</r-button>
 <r-button >Default button</r-button>

disabled

Adding the disabled attribute makes the button unavailable and changes the button style.

Primary button

Warning button

Text button

Default button

 <r-button type="primary" disabled>Primary butto</r-button>
 <r-button type="warning" disabled>Warning button</r-button>
 <r-button type="text" disabled>Text button</r-button>
 <r-button disabled>Default button</r-button>

icon

When you need to embed an Icon inside a Button, you can set the icon property or use the Icon component directly inside a Button.

If you want to control the specific position of the Icon, you can only use the Icon component directly, not the icon property.

Default button

Primary button

<r-button type="default" icon="user">Default button</r-button>
<r-button type="primary" icon="home">Primary button</r-button>

特效 effect

If you want a pure Button, you can add effect = false to block the water ripple effect when clicked

Default buttonPrimary button

<r-button type="default" icon="user">Default button</r-button>
<r-button type="primary" icon="home">Primary button</r-button>