Button 按钮

基本用法

import { Button } from 'zarm';
ReactDOM.render(
  <>
    <Button>default</Button>
    <Button theme="primary">primary</Button>
  </>
, mountNode);

块级按钮

import { Button } from 'zarm';
ReactDOM.render(
  <>
    <Button block>default</Button>
    <Button block disabled>default disabled</Button>
    <Button block theme="primary">primary</Button>
    <Button block disabled theme="primary">primary disabled</Button>
  </>
, mountNode);

按钮主题

import { Button } from 'zarm';
ReactDOM.render(
  <>
    <Button>default</Button>
    <Button theme="primary">primary</Button>
    <Button theme="danger">danger</Button>
  </>
, mountNode);

按钮尺寸

import { Button } from 'zarm';
ReactDOM.render(
  <>
    <Button size="lg">lg</Button>
    <Button>md</Button>
    <Button size="sm">sm</Button>
    <Button size="xs">xs</Button>
  </>
, mountNode);

按钮形状

import { Button, Icon } from 'zarm';
ReactDOM.render(
  <>
    <Button shape="rect" theme="primary">rect</Button>
    <Button theme="primary">radius</Button>
    <Button shape="round" theme="primary">round</Button>
    <Button shape="circle" theme="primary">circle</Button>
    <Button shape="circle" icon={<Icon type="right" />} />
  </>
, mountNode);

带阴影

import { Button } from 'zarm';
ReactDOM.render(
  <>
    <Button shadow>default</Button>
    <Button shadow theme="primary">primary</Button>
    <Button shadow theme="danger">danger</Button>
  </>
, mountNode);

图标按钮

import { Button, Icon } from 'zarm';
ReactDOM.render(
  <>
    <Button icon={<Icon type="right-round" theme="success" />}>正确</Button>
    <Button icon={<Icon type="wrong-round" theme="danger" />}>错误</Button>
    <Button loading>加载中</Button>
  </>
, mountNode);

链接按钮

import { Button } from 'zarm';
ReactDOM.render(
  <>
    <Button href="https://zarm.design">default</Button>
    <Button theme="primary" href="https://zarm.design">primary</Button>
    <Button theme="danger" href="https://zarm.design">danger</Button>
    <Button disabled theme="primary" href="https://zarm.design">disabled</Button>
  </>
, mountNode);

幽灵按钮

import { Button } from 'zarm';
ReactDOM.render(
  <>
    <Button block ghost>default</Button>
    <Button block ghost theme="primary">primary</Button>
    <Button block ghost theme="danger">danger</Button>
    <Button block ghost disabled>disabled</Button>
  </>
, mountNode);

API