---
title: Button 按钮
description: 按钮用于执行一个操作任务，如提交流程、进行表单查询等功能。
isComponent: true
usage: { title: "", description: "" }
spline: navigation
author: 明淞
---

## 基本用法

通过`default`、`content`可定义按钮的文本内容。

{{ base }}

## 带图标的按钮

通过`icon`可设置按钮左侧的图标或者其他内容，通过`suffix`可设置按钮右侧的图标或其他内容（暂未实现）

{{ icon }}

## 提示信息

通过`title`属性可设置鼠标悬停时候的提示信息，类似原生 html 中的 title 属性。

{{ title }}

## 不同形状

通过`shape`可以自定义不同形状的按钮，可选：`rectangle`，`square`，`round`，`circle`，默认为：`rectangle`。

> 注意：当 shape 设置为：`square`和`circle`的时候，按钮的文字不宜过长，最好是一个字或者使用纯图标按钮。

{{ shape }}

## 不同颜色

通过`theme`可设置按钮的不同颜色，可选：`default`，`primary`，`warning`，`success`，`danger`，默认为：`primary`。

{{ theme }}

## 不同形式

除了颜色可自定义外，还可以通过`variant`来定义按钮的展示形式，支持：`base`，`outline`，`dashed`，`plain`，`text`，默认
为`base`填充模式。

{{ variant }}

## 幽灵按钮

当按钮放置在深色背景或者图片上的时候，默认的按钮显示不明显，这时候可通过`ghost`来定义为幽灵按钮。

{{ ghost }}

## 块级按钮

通过设置`block`属性，可让按钮自动铺满父层的宽度，常用于页面的提交操作，或者默认的按钮宽度达不到要求的时候使用。

{{ block }}

## 不同尺寸

按钮内置 3 中大小，可通过`size`来定义，可选：`small`，`medium`，`large`。

{{ size }}

## 禁用状态

通过设置`disabled`属性可禁用当前按钮的一切操作，并且也会展示按钮的禁用样式。

{{ disabled }}

## 加载状态

{{ loading }}

## 定义类型标签

通过`tag`可设置按钮渲染的标签名称，默认为：`button`，还可通过`type`设置按钮的原生类型，只在`button`时有效。

{{ type }}
