Button
Common action buttons.
Basic Usage
Use the type prop to define the button type.
Plain Button
Use the plain prop to set a plain button style.
Round Button
Use the round prop to set rounded button corners.
Circle Button
Use the circle prop to create circle buttons, typically used for icon-only buttons.
Disabled
Use the disabled prop to control the disabled state.
Loading
Use the loading prop to control the loading state.
Sizes
Use the size prop to set the button size.
Text Button
Use the text prop to set a text-style button.
Link Button
Use the link prop to set a link-style button.
Block Button
Use the block prop to create a full-width block button.
Custom Color
Use the color prop to customize button colors.
Icon Position
Control the icon position relative to text with the icon-position prop. Supports left (default), right, top, bottom.
Use in Nuxt
The Button component fully supports Nuxt 3/4 SSR rendering. In Nuxt projects, the component is auto-imported without manual registration.
SSR Notes:
- ✅ All props and styles fully supported
- ✅ Event bindings work correctly
- ✅ Slot content fully rendered
- ✅ Dynamic states (loading, disabled, etc.)
- ⚠️
autofocusonly takes effect on client-side
SSR Safety
The Button component has passed comprehensive SSR testing, ensuring consistent rendering between server and client.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| type | Button type | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' |
| size | Button size | 'large' | 'default' | 'small' | 'default' |
| disabled | Whether disabled | boolean | false |
| loading | Whether loading | boolean | false |
| plain | Whether plain style | boolean | false |
| round | Whether rounded | boolean | false |
| circle | Whether circular | boolean | false |
| text | Whether text button | boolean | false |
| link | Whether link button | boolean | false |
| block | Whether block-level button | boolean | false |
| native-type | Native type attribute | 'button' | 'submit' | 'reset' | 'button' |
| autofocus | Whether auto-focus | boolean | false |
| icon | Left icon component | string | Component | — |
| suffix-icon | Right icon component | string | Component | — |
| icon-position | Icon position | 'left' | 'right' | 'top' | 'bottom' | 'left' |
| color | Custom button color | string | — |
| tag | Custom element tag | string | Component | 'button' |
Events
| Event Name | Description | Parameters |
|---|---|---|
| click | Triggered when button is clicked | (event: MouseEvent) => void |
Slots
| Slot Name | Description |
|---|---|
| default | Button content |
| icon | Custom content (affected by icon-position) |
| suffixIcon | Independent suffix slot (fixed on the right) |
| loading | Custom loading icon |
Expose
| Name | Description | Type |
|---|---|---|
| ref | Button DOM element reference | HTMLButtonElement | undefined |
| size | Computed actual size | ButtonSize |
| type | Button type | ButtonType |
| disabled | Whether disabled | boolean |
Theme Variables
The Button component supports customizing local styles by overriding the following CSS variables:
| Variable | Description | Default |
|---|---|---|
--yh-button-bg-color | Button background color | var(--yh-fill-color-blank) |
--yh-button-text-color | Button text color | var(--yh-text-color-regular) |
--yh-button-border-color | Button border color | var(--yh-border-color) |
--yh-button-hover-bg-color | Hover background color | var(--yh-color-primary-light-9) |
--yh-button-hover-text-color | Hover text color | var(--yh-color-primary) |
--yh-button-hover-border-color | Hover border color | var(--yh-color-primary-light-8) |
--yh-button-active-bg-color | Active/click background color | var(--yh-color-primary-light-8) |
--yh-button-active-border-color | Active/click border color | var(--yh-color-primary) |
--yh-button-active-text-color | Active/click text color | — |