---
order: 2
zh-CN:
	title: 类型总览
	info: 提示文案，通知提示。
	success: 提示文案，成功提示。
	error: 提示文案，失败提示。
	link1: 文字链接1
	link2: 文字链接2
	button: 按钮
en-US:
	title: Types
	info: Prompt copy, notification prompt.
	success: Prompt copy, success prompt.
	error: Prompt copy, failure prompt.
	link1: Link1
	link2: Link2
	button: Button
---

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

ReactDOM.render(
	<div className="zent-status-bar-example">
		<StatusBar
			type="info"
			extraContent={<Button type="primary">{i18n.button}</Button>}
		>
			{i18n.info}
			<a href="javascript:;">{i18n.link1}</a>
			<a href="javascript:;">{i18n.link2}</a>
		</StatusBar>
		<StatusBar
			type="waiting"
			progress={40}
			extraContent={<Button type="primary">{i18n.button}</Button>}
		>
			{i18n.info}
			<a href="javascript:;">{i18n.link1}</a>
			<a href="javascript:;">{i18n.link2}</a>
		</StatusBar>
		<StatusBar
			type="success"
			extraContent={<Button type="primary">{i18n.button}</Button>}
		>
			{i18n.success}
			<a href="javascript:;">{i18n.link1}</a>
			<a href="javascript:;">{i18n.link2}</a>
		</StatusBar>
		<StatusBar
			type="error"
			extraContent={<Button type="primary">{i18n.button}</Button>}
		>
			{i18n.error}
			<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>