Button 按钮
按钮组件是 Punch-UI 中最常用的组件之一，提供了多种样式、尺寸和颜色选择。
引入组件
<l-m src="https://punch-ui-v2.pages.dev/packages/button/button.html"></l-m>基本用法
默认按钮
按钮变体
通过 variant 属性设置按钮样式：
Filled Button
Outlined Button
Text Button
尺寸
通过 size 属性设置按钮尺寸：
Extra Small
Small
Default
Large
Extra Large
颜色
通过 color 属性设置按钮颜色：
Default
Primary
Error
Success
Neutral
图标按钮
添加 icon 属性使按钮成为圆形图标按钮：
+
-
×
带前缀/后缀
使用 prefix 和 suffix 插槽添加图标或文本：
🔍
Search
Settings
⚙️
禁用状态
添加 disabled 属性禁用按钮：
Disabled Button
Disabled Outlined
自动聚焦
使用 autofocus 属性使按钮在页面加载时自动获得焦点：
自动聚焦按钮
普通按钮
Button Group
使用按钮组将多个按钮组合在一起：
基础按钮组
按钮 1
按钮 2
按钮 3
连接按钮组
首页
产品
关于
全宽按钮组
Left
Center
Right
高级用法
分段控制（单选）
使用按钮组实现分段控制，适用于切换视图模式等场景：
Day
Week
Month
过滤器芯片（多选）
使用按钮组实现多选过滤器：
All
Active
Completed
排序选项
使用按钮组实现排序选项切换：
Newest
Oldest
Price
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
variant |
按钮样式 | filled | outlined | text |
filled |
size |
按钮尺寸 | xs | s | l | xl |
- |
color |
按钮颜色 | primary | error | success | neutral |
- |
icon |
是否为图标按钮 | boolean |
false |
disabled |
是否禁用 | boolean |
false |
autofocus |
是否自动聚焦 | boolean |
false |
插槽
| 插槽名 | 说明 |
|---|---|
default |
按钮内容 |
prefix |
前缀内容 |
suffix |
后缀内容 |