---
title: 组件示例
order: 2
---

## 基础用法

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DemoWrapper, FilterButton, config } from '@linkdesign/screen';

const { _cssPrefix } = config;

class App extends Component {
  render() {
    return (
      <DemoWrapper id="demo-FilterButton">
        <FilterButton
          className="filter-wrapper-row"
          dataSource={['全部', '选项一', '选项二']}
          defaultActiveKey="全部"
        />

        <FilterButton
          className="filter-wrapper-column"
          direction="column"
          align="right"
          defaultActiveKey="all"
          dataSource={[{
            label: '全部',
            value: 'all',
          }, {
            label: '选项一',
            value: 'option1',
          }, {
            label: <span>选项二</span>,
            value: 'option2',
          }]}
        />
      </DemoWrapper>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);
```