Skip to main content

Button

常用的操作按钮。

基础按钮​

基础按钮包括不同颜色状态下的填充按钮、描边按钮、虚框按钮和文字按钮。

function App() {
  return (
    <div className="ykui-demo-row">
      <Button type="default">default</Button>
      <Button type="primary">primary</Button>
      <Button type="danger">danger</Button>
      <Button type="primary-line">primary-line</Button>
      <Button type="text">text</Button>
    </div>
  );
}

禁用状态​

可以使用 disabled 属性来定义按钮是否被禁用，该属性接受一个 Boolean 类型的值。

function App() {
  return (
    <div className="ykui-demo-row">
      <Button type="default" disabled>default</Button>
      <Button type="primary" disabled>primary</Button>
      <Button type="danger" disabled>danger</Button>
      <Button type="primary-line" disabled>primary-line</Button>
      <Button type="text" disabled>text</Button>
    </div>
  );
}

不同尺寸​

提供 small、medium（默认）、large 三种尺寸的按钮。

function App() {
  return (
    <div className="ykui-demo-row">
      <Button size="small">小按钮</Button>
      <Button size="normal">中按钮</Button>
      <Button size="large">大按钮</Button>
    </div>
  );
}

带图标按钮​

可以使用 icon 属性来添加按钮图标。

function App() {
  return (
    <div className="ykui-demo-row">
      <Button icon="icon-08">图标按钮</Button>
      <Button icon="icon-62">图标按钮</Button>
      <Button icon="icon-62">图标按钮</Button>
    </div>
  );
}

API​

属性说明类型默认值
children内容ReactNode--
className类名string--
style样式CSSProperties--
buttonType按钮原始类型string--
type按钮类型primary〡default〡danger〡primary-line〡textprimary
size按钮尺寸small〡normal〡largenormal
icon按钮图标string--
disabled按钮禁用boolean--
href跳转链接string--