# Button 按钮

# 介绍

该Button组件兼容全端

# 代码演示

# 按钮类型

支持defaultprimaryinfowarningdanger五种类型,默认为default

<x-button type="default">默认按钮</x-button>
<x-button type="primary">主要按钮</x-button>
<x-button type="info">信息按钮</x-button>
<x-button type="warning">警告按钮</x-button>
<x-button type="danger">危险按钮</x-button>
1
2
3
4
5

# 朴素按钮

通过plain属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。

<x-button plain type="primary">朴素按钮</x-button>
<x-button plain type="info">朴素按钮</x-button>
1
2

# 禁用状态

通过disabled属性来禁用按钮,禁用状态下按钮不可点击

<x-button disabled type="primary">禁用状态</x-button>
<x-button disabled type="info">禁用状态</x-button>
1
2

# 按钮形状

通过square设置方形按钮,通过round设置圆形按钮

<x-button square type="primary">方形按钮</x-button>
<x-button round type="info">圆形按钮</x-button>
1
2

# 按钮尺寸

支持largenormalsmallmini四种尺寸,默认为normal

<x-button type="primary" size="large">大号按钮</x-button>
<x-button type="primary" size="normal">普通按钮</x-button>
<x-button type="primary" size="small">小型按钮</x-button>
<x-button type="primary" size="mini">迷你按钮</x-button>
1
2
3
4

# 自定义颜色

通过color属性可以自定义按钮的颜色

<x-button color="#7232dd">单色按钮</x-button>
<x-button color="#7232dd" plain>单色按钮</x-button>
<x-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</x-button>
1
2
3