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

48 lines
884 B
Markdown
Raw Normal View History

---
order: 8
title:
zh-CN: 幽灵按钮
en-US: Ghost Button
---
## zh-CN
2018-08-22 16:17:33 +08:00
幽灵按钮将按钮的内容反色,背景变为透明,常用在有色背景上。
## en-US
`ghost` property will make button's background transparent, it is commonly used in colored background.
2019-05-07 14:57:32 +08:00
```jsx
import { Button } from 'antd';
ReactDOM.render(
2019-12-23 16:36:40 +08:00
<div className="site-button-ghost-wrapper">
2019-05-07 14:57:32 +08:00
<Button type="primary" ghost>
Primary
</Button>
2017-03-18 16:33:55 +08:00
<Button ghost>Default</Button>
2019-11-22 15:32:11 +08:00
<Button type="primary" danger ghost>
2019-05-07 14:57:32 +08:00
danger
</Button>
2019-11-22 15:32:11 +08:00
<Button danger ghost>
2019-11-22 13:59:20 +08:00
Danger Default
2019-05-07 14:57:32 +08:00
</Button>
2019-11-22 15:32:11 +08:00
<Button type="link" danger ghost>
2019-11-22 12:02:35 +08:00
Danger Link
</Button>
2019-11-22 13:59:20 +08:00
<Button type="link" ghost>
link
</Button>
2018-06-27 15:55:04 +08:00
</div>,
2019-05-07 14:57:32 +08:00
mountNode,
2018-11-28 15:00:03 +08:00
);
2019-05-07 14:57:32 +08:00
```
2019-12-23 16:36:40 +08:00
<style>
.site-button-ghost-wrapper {
background: rgb(190, 200, 200);
padding: 26px 16px 16px;
}
</style>