Support 'large', 'normal', 'small' three sizes, the default is 'normal'.
:::demo
```tsx
importReactfrom"react";
importReactfrom"react";
import{Button}from'@nutui/nutui-react';
constApp=()=>{
constApp=()=>{
return(
<>
<Buttonsize="large"type="primary">Large</Button>
<Buttontype="primary">Normal</Button>
<Buttonsize="small"type="primary">Small</Button>
<Buttonsize="large"type="primary">Large</Button>
<Buttontype="primary">Normal</Button>
<Buttonsize="small"type="primary">Small</Button>
</>
);
};
exportdefaultApp;
```
:::
### Block
Buttons are inline block-level elements by default, and the 'block' attribute allows you to set the element type of the button to a block-level element, which is commonly used to implement banner buttons.
Buttons are inline block-level elements by default, and the 'block' attribute allows you to set the element type of the
button to a block-level element, which is commonly used to implement banner buttons.
:::demo
```tsx
importReactfrom"react";
importReactfrom"react";
import{Button}from'@nutui/nutui-react';
constApp=()=>{
constApp=()=>{
return(
<>
<Buttonblocktype="primary">Block</Button>
<Buttonblocktype="primary">Block</Button>
</>
);
};
exportdefaultApp;
```
:::
### Custom colors
The color property allows you to customize the color of the button.
| color | Button color, which supports incoming linear-gradient gradients | string | - |
| plain | Whether it is a naïve button or not | boolean | `false` |
| disabled | Whether to disable the button | boolean | `false` |
| plain | Whether it is a naïve button or not | boolean | `false` |
| disabled | Whether to disable the button | boolean | `false` |
| block | Whether it is a block-level element | boolean | `false` |
| icon | Button icon, with the Icon component name property | string | - |
| iconSize`v1.4.7` | Button icon size, with the Icon's size property | string \| number | `16` |
...
...
@@ -248,13 +274,17 @@ export default App;
| onClick`v1.3.8` | Triggered when the button is clicked | `event: MouseEvent` |
### Support Native MiniProgram API
Not supported native MiniProgram API before 1.3.11 version, if you are a user who needs to use the native MiniProgram button component capability,please upgrade to version 1.3.11 as soon as possible. For detailed API of native MiniProgram button components, please go to[more documents](https://taro-docs.jd.com/docs/components/forms/button)
Not supported native MiniProgram API before 1.3.11 version, if you are a user who needs to use the native MiniProgram
button component capability,please upgrade to version 1.3.11 as soon as possible. For detailed API of native MiniProgram
button components, please go to[more documents](https://taro-docs.jd.com/docs/components/forms/button)
## Theming
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
The component provides the following CSS variables, which can be used to customize styles. Please refer
to [ConfigProvider component](#/en-US/component/configprovider).