Element UI 的 Button 组件是构建交互界面的核心元素，提供丰富的样式和功能。以下是关键信息整理：

基础用法

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button>默认按钮</el-button>
element_ui_button_demo

核心属性

属性 说明 类型
type 按钮类型（primary/success/warning/danger/ghost） string
size 尺寸（default/medium/small） string
icon 图标名称（如：document, setting, refresh） string
loading 是否显示加载状态 boolean
disabled 是否禁用 boolean

高级功能

  • 加载状态：通过 loading 属性实现旋转图标
  • 禁用状态：点击事件自动失效
  • 图标组合：支持文字与图标混合显示
  • 自定义颜色：通过 CSS 可覆盖默认样式

示例演示

element_ui_button_types
> 点击[这里](/community/forum/vuejs/element-ui/guide)查看官方文档的完整示例

注意事项

  • 不同类型按钮的样式差异显著
  • 建议优先使用官方推荐的样式规范
  • 复杂场景可结合 图标库 使用

📌 本组件遵循 Element UI 官方设计规范，所有示例均通过实际测试