Button
The button component is one of the most commonly used components in Punch-UI, offering a variety of styles, sizes, and color choices.
Importing Components
<l-m src="https://punch-ui-v2.pages.dev/packages/button/button.html"></l-m>Basic Usage
Default Button
Button Variants
Set button style via the variant property:
Filled Button
Outlined Button
Text Button
Dimensions
Set button size via the size attribute:
Extra Small
Small
Default
Large
Extra Large
Colors
Set the button color through the color attribute:
Default
Primary
Error
Success
Neutral
Icon Button
Add the icon attribute to make the button a circular icon button:
+
-
×
With Prefix/Suffix
Use the prefix and suffix slots to add icons or text:
🔍
Search
Settings
⚙️
Disabled State
Add the disabled attribute to disable the button:
Disabled Button
Disabled Outlined
Autofocus
Use the autofocus attribute to make the button automatically receive focus when the page loads:
Auto Focus Button
Normal Button
Button Group
Use button groups to combine multiple buttons together:
Basic Button Group
Button 1
Button 2
Button 3
Connected Button Group
Home
Products
About
Full-width Button Group
Left
Center
Right
Advanced Usage
Segment Control (Single Select)
Use button groups to implement segmented control, suitable for scenarios such as switching view modes:
Day
Week
Month
Filter chips (multi-select)
Use button groups to implement a multi-select filter:
All
Active
Completed
Sort Options
Implement sorting option switching using a button group:
Newest
Oldest
Price
API
Attributes
| Property | Description | Type | Default |
|---|---|---|---|
variant |
Button style | filled | outlined | text |
filled |
size |
Button size | xs | s | l | xl |
- |
color |
Button color | primary | error | success | neutral |
- |
icon |
Whether it is an icon button | boolean |
false |
disabled |
Whether it is disabled | boolean |
false |
autofocus |
Whether to autofocus | boolean |
false |
| Slot Name | Description |
|---|---|
default |
Button content |
prefix |
Prefix content |
suffix |
Suffix content |