title: Button 按钮 nav: title: 组件 order: 1 group: title: 通用 order: 1

Button 按钮

用于触发一个操作或行为。

基础用法

import React from 'react';
import { Button } from '@fan-comp/button';

export default () => (
  <div style={{ display: 'flex', gap: '8px' }}>
    <Button type="primary">Primary Button</Button>
    <Button type="default">Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <Button type="text">Text Button</Button>
    <Button type="danger">Danger Button</Button>
  </div>
);

按钮尺寸

import React from 'react';
import { Button } from '@fan-comp/button';

export default () => (
  <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
    <Button type="primary" size="small">Small</Button>
    <Button type="primary" size="middle">Middle</Button>
    <Button type="primary" size="large">Large</Button>
  </div>
);

禁用状态

import React from 'react';
import { Button } from '@fan-comp/button';

export default () => (
  <div style={{ display: 'flex', gap: '8px' }}>
    <Button type="primary" disabled>Disabled Primary</Button>
    <Button type="default" disabled>Disabled Default</Button>
  </div>
);

API