ant-design/components/button/demo/icon.md

58 lines
1.1 KiB
Markdown
Raw Normal View History

2015-06-17 18:22:20 +08:00
# 图标按钮
2015-09-27 16:30:35 +08:00
- order: 6
2015-09-27 16:30:35 +08:00
`Button` 内可以嵌套图标,图标可以放在文字前、后,也可以单独存在。
2015-06-25 17:39:24 +08:00
---
2015-09-27 16:30:35 +08:00
````jsx
import { Button, Icon } from 'antd';
2015-09-27 16:30:35 +08:00
2015-10-20 16:47:55 +08:00
ReactDOM.render(<div>
2015-10-26 11:02:48 +08:00
<Button type="primary" shape="circle" size="large">
2015-09-27 16:30:35 +08:00
<Icon type="search" />
</Button>
2015-10-26 11:02:48 +08:00
<Button type="primary" size="large">
2015-09-27 16:30:35 +08:00
<Icon type="search" />
2015-06-25 17:39:24 +08:00
大按钮
2015-09-27 16:30:35 +08:00
</Button>
2015-06-25 17:39:24 +08:00
2015-09-27 16:30:35 +08:00
<Button type="primary" shape="circle">
<Icon type="search" />
</Button>
<Button type="primary">
<Icon type="search" />
2015-06-25 17:39:24 +08:00
中按钮
2015-09-27 16:30:35 +08:00
</Button>
2015-06-25 17:39:24 +08:00
2015-10-26 11:02:48 +08:00
<Button type="primary" shape="circle" size="small">
2015-09-27 16:30:35 +08:00
<Icon type="search" />
</Button>
2015-10-26 11:02:48 +08:00
<Button type="primary" size="small">
2015-09-27 16:30:35 +08:00
<Icon type="search" />
2015-06-25 17:39:24 +08:00
小按钮
2015-09-27 16:30:35 +08:00
</Button>
<br />
2015-10-26 11:02:48 +08:00
<Button type="ghost" shape="circle-outline" size="large">
2015-09-27 16:30:35 +08:00
<Icon type="search" />
</Button>
<Button type="ghost" shape="circle-outline">
<Icon type="search" />
</Button>
2015-10-26 11:02:48 +08:00
<Button type="ghost" shape="circle-outline" size="small">
2015-09-27 16:30:35 +08:00
<Icon type="search" />
</Button>
</div>,
mountNode);
2015-06-25 17:39:24 +08:00
````
2015-09-27 16:30:35 +08:00
<style>
#components-button-demo-icon .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>