Button 按钮

常用的操作按钮。

基础用法

按钮的基础用法

---

---

<ivy-button>默认按钮</ivy-button>
<ivy-button type="primary">主要按钮</ivy-button>
<ivy-button type="success">success</ivy-button>
<ivy-button type="warning">warning</ivy-button>
<ivy-button type="danger">danger</ivy-button>
<ivy-button type="info">info</ivy-button>

<ivy-button plain>朴素按钮</ivy-button>
<ivy-button type="primary" plain>主要按钮</ivy-button>
<ivy-button type="success" plain>success</ivy-button>
<ivy-button type="warning" plain>warning</ivy-button>
<ivy-button type="danger" plain>danger</ivy-button>
<ivy-button type="info" plain>info</ivy-button>

<ivy-button round>圆角按钮</ivy-button>
<ivy-button type="primary" round>主要按钮</ivy-button>
<ivy-button type="success" round>success</ivy-button>
<ivy-button type="warning" round>warning</ivy-button>
<ivy-button type="danger" round>danger</ivy-button>
<ivy-button type="info" round>info</ivy-button>

<ivy-button>默认按钮</ivy-button>
<ivy-button type="primary">主要按钮</ivy-button>
<ivy-button type="success">success</ivy-button>
<ivy-button type="warning">warning</ivy-button>
<ivy-button type="danger">danger</ivy-button>
<ivy-button type="info">info</ivy-button>

<ivy-button plain>朴素按钮</ivy-button>
<ivy-button type="primary" plain>主要按钮</ivy-button>
<ivy-button type="success" plain>success</ivy-button>
<ivy-button type="warning" plain>warning</ivy-button>
<ivy-button type="danger" plain>danger</ivy-button>
<ivy-button type="info" plain>info</ivy-button>

<ivy-button round>圆角按钮</ivy-button>
<ivy-button type="primary" round>主要按钮</ivy-button>
<ivy-button type="success" round>success</ivy-button>
<ivy-button type="warning" round>warning</ivy-button>
<ivy-button type="danger" round>danger</ivy-button>
<ivy-button type="info" round>info</ivy-button>

禁用状态

按钮的禁用状态

---

<ivy-button disabled>默认按钮</ivy-button>
<ivy-button type="primary" disabled>主要按钮</ivy-button>
<ivy-button type="success" disabled>success</ivy-button>
<ivy-button type="warning" disabled>warning</ivy-button>
<ivy-button type="danger" disabled>danger</ivy-button>
<ivy-button type="info" disabled>info</ivy-button>

<ivy-button plain disabled>朴素按钮</ivy-button>
<ivy-button type="primary" plain disabled>主要按钮</ivy-button>
<ivy-button type="success" plain disabled>success</ivy-button>
<ivy-button type="warning" plain disabled>warning</ivy-button>
<ivy-button type="danger" plain disabled>danger</ivy-button>
<ivy-button type="info" plain disabled>info</ivy-button>

<ivy-button disabled>默认按钮</ivy-button>
<ivy-button type="primary" disabled>主要按钮</ivy-button>
<ivy-button type="success" disabled>success</ivy-button>
<ivy-button type="warning" disabled>warning</ivy-button>
<ivy-button type="danger" disabled>danger</ivy-button>
<ivy-button type="info" disabled>info</ivy-button>

<ivy-button plain disabled>朴素按钮</ivy-button>
<ivy-button type="primary" plain disabled>主要按钮</ivy-button>
<ivy-button type="success" plain disabled>success</ivy-button>
<ivy-button type="warning" plain disabled>warning</ivy-button>
<ivy-button type="danger" plain disabled>danger</ivy-button>
<ivy-button type="info" plain disabled>info</ivy-button>

不同尺寸

Button组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸

<ivy-button size="large">large</ivy-button>
<ivy-button>默认</ivy-button>
<ivy-button size="small">small</ivy-button>

<ivy-button size="large" round>large</ivy-button>
<ivy-button round>默认</ivy-button>
<ivy-button size="small" round>small</ivy-button>

<ivy-button size="large">large</ivy-button>
<ivy-button>默认</ivy-button>
<ivy-button size="small">small</ivy-button>

<ivy-button size="large" round>large</ivy-button>
<ivy-button round>默认</ivy-button>
<ivy-button size="small" round>small</ivy-button>

Props

属性	描述	类型	可选值	默认值
type	类型	string	primary/success/warning/danger/info	primary
round	圆角按钮	boolean	—	false
disabled	禁用按钮	boolean	—	false
size	大小	string	large/medium/small	medium