---
title: 筛选按钮
order: 4
---

## 文本类-筛选按钮 FilterButton

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Text, STYLE_PREFIX } from '@linkdesign/screen';

const { FilterButton } = Text;

const App = () => {
  return (
    <div data-theme="dark" className="filter-button">
      <FilterButton
        className="filter-wrapper-row"
        dataSource={['全部', '选项一', '选项二']}
        defaultActiveKey="全部"
        onChange={(key) => { console.log(key); }}
      />

      <FilterButton
        className="filter-wrapper-column"
        direction="column"
        align="right"
        defaultActiveKey="all"
        onChange={(key) => { console.log(key); }}
        dataSource={[{
          name: '全部',
          key: 'all',
        }, {
          name: '选项一',
          key: 'option1',
        }, {
          name: <span>选项二</span>,
          key: 'option2',
        }]}
      />
    </div>
  );
}

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

````css
.filter-button {
  position: relative;
  background-color: #1f3b6d;
}

.filter-wrapper-row {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
````
