---
order: 1
zh-CN:
	title: 基础使用
	content: 提示文案，常规提示。
	link1: 文字链接1
	link2: 文字链接2
	button: 按钮
en-US:
	title: Basic usage
	content: Prompt copy, regular prompt
	link1: Link1
	link2: Link2
	button: Button
---

```jsx
import { StatusBar, Button } from 'zent';

ReactDOM.render(
	<div className="zent-status-bar-example">
		<StatusBar
			type="waiting"
			progress={50}
			extraContent={<Button type="primary">{i18n.button}</Button>}
		>
			{i18n.content}
			<a href="javascript:;">{i18n.link1}</a>
			<a href="javascript:;">{i18n.link2}</a>
		</StatusBar>
	</div>,
	mountNode
);
```

<style>
.zent-status-bar-example .zent-alert {
	margin-bottom: 24px;
}
.zent-status-bar-example .zent-alert a {
	margin: 0 10px 0 8px;
}
</style>