2016-03-31 09:40:55 +08:00
---
order: 2
2016-04-22 14:52:19 +08:00
title:
zh-CN: 按钮尺寸
en-US: Size
2016-03-31 09:40:55 +08:00
---
2015-06-05 20:26:41 +08:00
2016-04-22 14:52:19 +08:00
## zh-CN
2015-09-27 16:30:35 +08:00
按钮有大、中、小三种尺寸。
2015-06-07 14:03:00 +08:00
2015-10-22 21:01:52 +08:00
通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size` ,则尺寸为中。
2015-06-05 20:26:41 +08:00
2016-04-22 14:52:19 +08:00
## en-US
2016-04-25 11:04:56 +08:00
Ant Design supports a default button size as well as a large and small size.
2016-04-22 14:52:19 +08:00
2016-04-25 11:04:56 +08:00
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
2016-04-22 14:52:19 +08:00
2017-02-13 10:55:53 +08:00
````jsx
2016-12-02 15:06:59 +08:00
import { Button, Radio, Icon } from 'antd';
class ButtonSize extends React.Component {
state = {
2017-09-11 15:17:48 +08:00
size: 'large',
2016-12-02 15:06:59 +08:00
};
handleSizeChange = (e) => {
this.setState({ size: e.target.value });
}
render() {
const size = this.state.size;
return (
< div >
< Radio.Group value = {size} onChange = {this.handleSizeChange} >
< Radio.Button value = "large" > Large< / Radio.Button >
< Radio.Button value = "default" > Default< / Radio.Button >
< Radio.Button value = "small" > Small< / Radio.Button >
< / Radio.Group >
< br / > < br / >
2017-09-11 15:17:48 +08:00
< Button type = "primary" size = {size} > Primary< / Button >
< Button size = {size} > Normal< / Button >
< Button type = "dashed" size = {size} > Dashed< / Button >
< Button type = "danger" size = {size} > Danger< / Button >
< br / >
2016-12-02 15:06:59 +08:00
< Button type = "primary" shape = "circle" icon = "download" size = {size} / >
2019-01-10 11:15:43 +08:00
< Button type = "primary" shape = "round" icon = "download" size = {size} > Download< / Button >
2016-12-02 15:06:59 +08:00
< Button type = "primary" icon = "download" size = {size} > Download< / Button >
< br / >
< Button.Group size = {size} >
< Button type = "primary" >
< Icon type = "left" / > Backward
< / Button >
< Button type = "primary" >
Forward< Icon type = "right" / >
< / Button >
< / Button.Group >
< / div >
);
}
}
ReactDOM.render(< ButtonSize / > , mountNode);
2015-06-05 20:26:41 +08:00
````