## 示例

```tsx
import React from 'react';
import { Button } from '@alicloud/console-components';

export default () => {
  return (
    <div>
      <Button component="a" text>
        链接内容
      </Button>
      &nbsp;&nbsp;&nbsp;
      <Button component="a" text disabled>
        链接内容
      </Button>
    </div>
  );
};

export const meta = {
  title: '基础链接',
  describe:
    'Button组件添加 text 属性为文字按钮,通过 component 属性 控制最终渲染的 jsx 标签标签类型为a标签。',
};

```

```tsx
import React from 'react';
import { Button } from '@alicloud/console-components';

export default () => {
  return (
    <div>
      <Button type="primary" component="a" text>
        链接内容
      </Button>
      &nbsp;&nbsp;&nbsp;
      <Button type="primary" component="a" text disabled>
        链接内容
      </Button>
    </div>
  );
};

export const meta = {
  title: '高亮链接',
  describe:
    'Button组件添加 text 属性为文字按钮,通过 component 属性 控制最终渲染的 jsx 标签标签类型为a标签。',
};

```

```tsx
import React, { useState } from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';

const getDataSource = () => {
  const result: any[] = [];
  for (let i = 0; i < 2; i++) {
    result.push({
      id: 100306660940 + i,
      status: i % 2 === 0 ? '运行中' : '停用',
      type: '专用网络',
      title: '可以通过 expandedRowRender 额外渲染行',
      name: '实例名称',
    });
  }
  return result;
};

const render = () => {
  return (
    <Actions>
      <LinkButton
        onClick={() => {
          alert('on click');
        }}
      >
        操作项
      </LinkButton>
      <LinkButton
        onClick={() => {
          alert('on click');
        }}
      >
        操作项
      </LinkButton>
      <LinkButton
        onClick={() => {
          alert('on click');
        }}
      >
        操作项
      </LinkButton>
    </Actions>
  );
};

export default () => {
  const [dataSource, setDataSource] = useState(getDataSource());

  const onFilter = (filterParams) => {
    let ds = getDataSource();
    Object.keys(filterParams).forEach((key) => {
      const { selectedKeys } = filterParams[key];
      if (selectedKeys.length) {
        ds = ds.filter((record) => {
          return selectedKeys.some((value) => {
            return record[key].indexOf(value) > -1;
          });
        });
      }
    });
    setDataSource(ds);
  };

  const renderId = (value, _index, record) => {
    const { name } = record;
    return (
      <div>
        <a href="/">{value}</a>
        <div>{name}</div>
      </div>
    );
  };
  return (
    <div>
      <Table onFilter={onFilter} dataSource={dataSource} hasBorder={false}>
        <Table.Column
          title="实例ID/名称"
          dataIndex="id"
          width={200}
          cell={renderId}
        />
        <Table.Column
          filters={[
            {
              label: '运行中',
              value: '运行中',
            },
            {
              label: '停用',
              value: '停用',
            },
          ]}
          title="状态"
          dataIndex="status"
        />
        <Table.Column title="网络类型" dataIndex="type" />
        <Table.Column title="操作" cell={render} width={200} />
      </Table>
    </div>
  );
};

export const meta = {
  title: '常用场景',
  describe: '表格场景内使用',
};

```