Button 按钮

使用场景

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

示例

基本示例

inline

function Basic() { return ( <Group> <Group> <Button>按钮</Button> </Group> <Group mt="l"> <Button type="normal">普通按钮</Button> <Button type="primary">焦点按钮</Button> <Button type="secondary">次级按钮</Button> <Button disabled>禁用按钮</Button> </Group> <Group mt="l"> <Button shape="warning" type="normal"> 普通警告按钮 </Button> <Button shape="warning" type="primary"> 焦点警告按钮 </Button> </Group> <Group mt="l"> <Button shape="text" type="normal"> 普通文本按钮 </Button> <Button shape="text" type="primary"> 焦点链接按钮 </Button> <Button shape="text" type="primary" disabled> 焦点链接按钮 </Button> </Group> </Group> ); }

function Basic() {
  return (
    <Group>
      <Group>
        <Button>按钮</Button>
      </Group>
      <Group mt="l">
        <Button type="normal">普通按钮</Button>
        <Button type="primary">焦点按钮</Button>
        <Button type="secondary">次级按钮</Button>
        <Button disabled>禁用按钮</Button>
      </Group>
      <Group mt="l">
        <Button shape="warning" type="normal">
          普通警告按钮
        </Button>
        <Button shape="warning" type="primary">
          焦点警告按钮
        </Button>
      </Group>
      <Group mt="l">
        <Button shape="text" type="normal">
          普通文本按钮
        </Button>
        <Button shape="text" type="primary">
          焦点链接按钮
        </Button>
        <Button shape="text" type="primary" disabled>
          焦点链接按钮
        </Button>
      </Group>
    </Group>
  );
}

链接型按钮

与文本按钮相比，链接型按钮没有内间距

inline

function LinkButton() { return ( <Group> <Button shape="link" type="normal"> 普通链接按钮 </Button> <Button shape="link" type="primary"> 焦点链接按钮 </Button> </Group> ); }

function LinkButton() {
  return (
    <Group>
      <Button shape="link" type="normal">
        普通链接按钮
      </Button>
      <Button shape="link" type="primary">
        焦点链接按钮
      </Button>
    </Group>
  );
}

按钮大小

通过 size 设置按钮的尺寸

inline

// 以下变量从其他模块中引入： // Icon function Size() { return ( <Box> <Group> <Button size="small" leftElement={<Icon type="calendar" />}> 小尺寸按钮 </Button> <Button size="medium" leftElement={<Icon type="calendar" />}> 中尺寸按钮 </Button> <Button size="large" leftElement={<Icon type="calendar" />}> 大尺寸按钮 </Button> </Group> <Group mt="l"> <Button size="small" leftElement={<Icon type="arrow-left-bold" />}> 小尺寸按钮 </Button> <Button size="medium" leftElement={<Icon type="arrow-left-bold" />}> 中尺寸按钮 </Button> <Button size="large" leftElement={<Icon type="arrow-left-bold" />}> 大尺寸按钮 </Button> </Group> <Group mt="l"> <Button size="small" iconOnly> <Icon type="arrow-left-bold" /> </Button> <Button size="medium" iconOnly> <Icon type="arrow-left-bold" /> </Button> <Button size="large" iconOnly> <Icon type="arrow-left-bold" /> </Button> </Group> </Box> ); }

// 以下变量从其他模块中引入：
//  Icon

function Size() {
  return (
    <Box>
      <Group>
        <Button size="small" leftElement={<Icon type="calendar" />}>
          小尺寸按钮
        </Button>
        <Button size="medium" leftElement={<Icon type="calendar" />}>
          中尺寸按钮
        </Button>
        <Button size="large" leftElement={<Icon type="calendar" />}>
          大尺寸按钮
        </Button>
      </Group>
      <Group mt="l">
        <Button size="small" leftElement={<Icon type="arrow-left-bold" />}>
          小尺寸按钮
        </Button>
        <Button size="medium" leftElement={<Icon type="arrow-left-bold" />}>
          中尺寸按钮
        </Button>
        <Button size="large" leftElement={<Icon type="arrow-left-bold" />}>
          大尺寸按钮
        </Button>
      </Group>
      <Group mt="l">
        <Button size="small" iconOnly>
          <Icon type="arrow-left-bold" />
        </Button>
        <Button size="medium" iconOnly>
          <Icon type="arrow-left-bold" />
        </Button>
        <Button size="large" iconOnly>
          <Icon type="arrow-left-bold" />
        </Button>
      </Group>
    </Box>
  );
}

整行按钮

通过 fill 设置按钮占据整行，通常用于小屏场景

inline

() => ( <Button type="primary" fill> 整行按钮 </Button> )

() => (
  <Button type="primary" fill>
    整行按钮
  </Button>
)

带图标的按钮

inline

// 以下变量从其他模块中引入： // Icon () => ( <Group> <Button leftElement={<Icon type="email" />} type="primary"> 邮箱 </Button> <Button rightElement={<Icon type="arrow-right" />}>点击了解更多</Button> <Button shape="text" leftElement={<Icon type="add" />}> 新建 </Button> </Group> )

// 以下变量从其他模块中引入：
//  Icon

() => (
  <Group>
    <Button leftElement={<Icon type="email" />} type="primary">
      邮箱
    </Button>
    <Button rightElement={<Icon type="arrow-right" />}>点击了解更多</Button>

    <Button shape="text" leftElement={<Icon type="add" />}>
      新建
    </Button>
  </Group>
)

图标按钮

通过 iconOnly 设置按钮为图标按钮，此时按钮的宽高相同。

外观

尺寸

inline

// 以下变量从其他模块中引入： // Icon () => ( <Group> <h3>外观</h3> <Button iconOnly> <Icon type="arrow-right-bold" /> </Button> <Button iconOnly type="secondary"> <Icon type="arrow-right-bold" /> </Button> <Button iconOnly type="primary"> <Icon type="arrow-right-bold" /> </Button> <Button iconOnly disabled> <Icon type="arrow-right-bold" /> </Button> <br /> <br /> <Button iconOnly shape="text"> <Icon type="close" /> </Button> <Button iconOnly shape="text" type="secondary"> <Icon type="close" /> </Button> <Button iconOnly shape="text" type="primary"> <Icon type="close" /> </Button> <Button iconOnly shape="text" disabled> <Icon type="close" /> </Button> <h3>尺寸</h3> <Button size="small" iconOnly> <Icon type="calendar" /> </Button> <Button size="medium" iconOnly> <Icon type="calendar" /> </Button> <Button size="large" iconOnly> <Icon type="calendar" /> </Button> <br /> <Button shape="text" size="small" iconOnly> <Icon type="calendar" /> </Button> <Button shape="text" size="medium" iconOnly> <Icon type="calendar" /> </Button> <Button shape="text" size="large" iconOnly> <Icon type="calendar" /> </Button> </Group> )

// 以下变量从其他模块中引入：
//  Icon

() => (
  <Group>
    <h3>外观</h3>
    <Button iconOnly>
      <Icon type="arrow-right-bold" />
    </Button>
    <Button iconOnly type="secondary">
      <Icon type="arrow-right-bold" />
    </Button>
    <Button iconOnly type="primary">
      <Icon type="arrow-right-bold" />
    </Button>
    <Button iconOnly disabled>
      <Icon type="arrow-right-bold" />
    </Button>
    <br />
    <br />
    <Button iconOnly shape="text">
      <Icon type="close" />
    </Button>
    <Button iconOnly shape="text" type="secondary">
      <Icon type="close" />
    </Button>
    <Button iconOnly shape="text" type="primary">
      <Icon type="close" />
    </Button>
    <Button iconOnly shape="text" disabled>
      <Icon type="close" />
    </Button>

    <h3>尺寸</h3>
    <Button size="small" iconOnly>
      <Icon type="calendar" />
    </Button>
    <Button size="medium" iconOnly>
      <Icon type="calendar" />
    </Button>
    <Button size="large" iconOnly>
      <Icon type="calendar" />
    </Button>
    <br />
    <Button shape="text" size="small" iconOnly>
      <Icon type="calendar" />
    </Button>
    <Button shape="text" size="medium" iconOnly>
      <Icon type="calendar" />
    </Button>
    <Button shape="text" size="large" iconOnly>
      <Icon type="calendar" />
    </Button>
  </Group>
)

按钮组

inline

() => ( <Group> <Group attached> <Button>Left Button</Button> <Button>Center Button</Button> <Button>Right Button</Button> </Group> <br /> <br /> <Group> <Button>Left Button</Button> <Button>Center Button</Button> <Button>Right Button</Button> </Group> </Group> )

() => (
  <Group>
    <Group attached>
      <Button>Left Button</Button>
      <Button>Center Button</Button>
      <Button>Right Button</Button>
    </Group>
    <br />
    <br />
    <Group>
      <Button>Left Button</Button>
      <Button>Center Button</Button>
      <Button>Right Button</Button>
    </Group>
  </Group>
)

加载状态

inline

() => { const [loading, setLoading] = useState(false); return ( <Group> <Button loading={loading} onClick={() => setLoading(!loading)}> 点击切换加载状态 </Button> <Button type="primary" loading={loading} onClick={() => setLoading(!loading)}> 点击切换加载状态 </Button> </Group> ); }

() => {
  const [loading, setLoading] = useState(false);
  return (
    <Group>
      <Button loading={loading} onClick={() => setLoading(!loading)}>
        点击切换加载状态
      </Button>
      <Button type="primary" loading={loading} onClick={() => setLoading(!loading)}>
        点击切换加载状态
      </Button>
    </Group>
  );
}

可选中的按钮

inline

() => { const [selected, setSelected] = useState(false); return ( <Button selected={selected} onClick={() => setSelected(!selected)}> {selected ? '已订阅' : '订阅'} </Button> ); }

() => {
  const [selected, setSelected] = useState(false);
  return (
    <Button selected={selected} onClick={() => setSelected(!selected)}>
      {selected ? '已订阅' : '订阅'}
    </Button>
  );
}

API

字段	描述
size	"small" | "medium" | "large" 尺寸
type	"normal" | "primary" | "secondary" 级别
target	string 仅在 as="a" 时生效
as	"button" | "a"
fill	boolean 按钮长度是否占满容器
href	string 仅在 as="a" 时生效
shape	"link" | "text" | "solid" | "warning" | "ghost" 外观
loading	boolean 是否载入中
selected	boolean 是否选中/激活
leftElement	ReactNode 内部左侧元素
rightElement	ReactNode 内部右侧元素
htmlType	"button" | "submit" | "reset" html 原生类型
iconOnly	boolean 是否为仅包含单个图标的按钮