button
Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
state | state | "danger" | "default" | "ghost" | "info" | "primary" | "success" | "warning" | "default" | |
disabled | disabled | boolean | false | |
icon | icon | string | "" | |
loading | loading | boolean | false | |
selected | selected | boolean | false | |
size | size | "large" | "medium" | "small" | "medium" | |
suffixIcon | suffix-icon | string | "" | |
state | state | "default" | "neo" | "outline" | "solid" | "text" | "default" |
Events
| Event | Description | Type |
|---|---|---|
buttonClick | CustomEvent<{ event: MouseEvent; selected: boolean; }> |
1. Basic buttons (default state)
Shows a minimalist button with an appearance that can be adjusted based on size, state and state.
Primary Button
2. Buttons of different colours
Displays buttons in different colours, covering primary, success, info, warning, danger, and ghost.
3. Buttons of different sizes demonstrate the different effects of the
size attribute. You can use small, medium, and large to demonstrate different button sizes.
4. Buttons with icons
Displays buttons with icons. Use the icon,suffix-icon attributes to add prefix and suffix icons to buttons.
5. Different styles of buttons
show how buttons look when they are in button style mode, using the solid, outline, text, neo, and default attributes.
6. Loading, disabled, selected state display
Display buttons in the loading, disabled, or selected state using the loading, disabled, icon, selected, and other attributes.