---
description: 'A Button component.'
labels: ['label1', 'label2', 'label3']
---

import BaseHeader from './index'
import { Button } from 'antd'
import Breadcrumbs from '@platformuiserver/platformui.breadcrumbs'
import '@platformuiserver/platformui.assets/css/index.less'

### 组件使用方式

```js
<div style={{ width: '100%' }}>
  <BaseHeader text={'标题'} handleBtn={() => console.log('标题')} />
  <BaseHeader
    text={
      <Breadcrumbs
        breadcrumbList={[
          {
            link: 'path',
            key: 'metadata',
            name: '名称',
            back: () => {
              console.log('回调函数')
            }
          },
          {
            key: 'metadata2',
            name: '名称'
          }
        ]}
      />
    }
    handleBtn={
      <div>
        <Button style={{ marginRight: '10px' }}>取 消</Button>
        <Button type="primary">保 存</Button>
      </div>
    }
  />
</div>
```

### Using props to customize the text

Modify the text to see it change live:

```js live
<div style={{ width: '100%' }}>
  <BaseHeader
    text={
      <Breadcrumbs
        breadcrumbList={[
          {
            link: 'path',
            key: 'metadata',
            name: '名称',
            back: () => {
              console.log('回调函数')
            }
          },
          {
            key: 'metadata2',
            name: '名称'
          }
        ]}
      />
    }
    handleBtn={
      <div>
        <Button style={{ marginRight: '10px' }}>取 消</Button>
        <Button type="primary">保 存</Button>
      </div>
    }
  />
</div>
```

## Properties

| 属性      | 说明 | 类型 | 默认值 | 版本  |
| --------- | ---- | ---- | ------ | ----- |
| text      | Text | Text | Title  | Title |
| handleBtn | Text | Text | Text   | Text  |
