@uiw/react-button

Button 按钮
===


按钮用于开始一个即时操作，触发业务逻辑时使用。

``jsx
import { Button, ButtonGroup } from 'uiw';
// or
import Button from '@uiw/react-button';
import ButtonGroup from '@uiw/react-button-group';
`

$3

`jsx mdx:preview
import React from 'react';
import { Button, Divider, Icon } from 'uiw';

export default function Demo() {
return(



);
}
`

$3

`jsx mdx:preview
import React from 'react';
import { Button, Divider, ButtonGroup } from 'uiw';

export default function Demo() {
return(



);
}
`

$3

`jsx mdx:preview
import React from 'react';
import { Button, Icon, Divider } from 'uiw';

const chat = ;
const open = ;
const merged = ;
const closed = ;

export default function Demo() {
return(



);
}
`

$3

`jsx mdx:preview
import React from 'react';
import { Button, Icon, Divider } from 'uiw';

export default function Demo() {
return(



);
}
`

$3

`jsx mdx:preview
import React from 'react';
import { Button, ButtonGroup, Divider } from 'uiw';

export default function Demo() {
return(



);
}
`

$3

`jsx mdx:preview
import React from 'react';
import { Button, ButtonGroup, Row, Col } from 'uiw';

export default function Demo() {
return(



按钮
按钮
按钮
按钮




按钮
按钮
按钮
按钮




按钮
按钮
按钮
按钮




主要按钮
成功按钮
警告按钮
错误按钮
亮按钮
暗按钮



);
}
`

$3

设置 basic=true 即可获得基本按钮，没有背景颜色的状态按钮。

`jsx mdx:preview
import React from 'react';
import { Button, Divider } from 'uiw';

export default function Demo() {
return(



);
}
`

$3

设置 basic=true 即可获得基本按钮，没有背景颜色的状态按钮。

`jsx mdx:preview
import React from 'react';
import { Button, Divider } from 'uiw';

const chat = (



)

export default function Demo() {
return(



);
}
`

$3

`jsx mdx:preview
import React from 'react';
import { Button } from 'uiw';

export default function Demo() {
return(



);
}
`

$3

`jsx mdx:preview
import React from 'react';
import { Button } from 'uiw';

export default function Demo() {
return(



);
}
`

$3

`jsx mdx:preview
import React from 'react';
import { Button, Row, Col } from 'uiw';

export default function Demo() {
return(


主要按钮
成功按钮
警告按钮
错误按钮
亮按钮
暗按钮


);
}
`

$3

size 在 Button.Group下面不支持。

`jsx mdx:preview
import React from 'react';
import { Button, Divider } from 'uiw';

export default function Demo() {
return(



);
}
`

Props

$3

| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------- | -------- | -------- |
| size | 按钮尺寸 | Enum{large, default, small} | default |
| type | 按钮状态类型附带颜色 | Enum{primary, success, warning, danger, light, dark, link} | light |
| htmlType | 设置 button 原生的 type 值，可选值请参考 HTML 标准 | String | button |
| icon | 设置按钮的图标类型 | String/ReactNode | - |
| block | 通过设置属性 block 可将按钮宽度设置为 100%，（块级元素），常用于弹窗内操作按钮。 | Boolean | false |
| disabled | 禁用状态 | Boolean | false |
| active | 激活状态，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。 | Boolean | false |
| loading | 加载中状态 | Boolean | false |

$3

| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------- | -------- | -------- |
| vertical | 竖排列 | Boolean | false` |