'/%3e%3cpath%20d='M0%2059.6282L80.7353%200.299805L161.471%2059.6282L80.7355%20118.345L0%2059.6282Z'%20fill='%2310B981'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_0_1'%20x1='80.7354'%20y1='39.9999'%20x2='80.7354'%20y2='113.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23065F46'/%3e%3cstop%20offset='1'%20stop-color='%2310B981'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e){kind=small}
#API
Button
props
Name | Description | Type | Default | Values | Required |
|---|---|---|---|---|---|
size | Control size. One of xs, sm, md, lg, xl. | String | md | xssmmdlgxl | |
color | Theme or CSS color used for the control accents. | String | |||
disabled | Disables interaction and applies disabled styling. | Boolean | false | ||
loading | Shows a loading indicator and blocks interaction. | Boolean | false | ||
loadingLabel | Accessible label announced while loading. | String | |||
loadingStatus | Loader visual status (for example active or indeterminate). | String | active | ||
outlined | Outline style with a transparent fill. | Boolean | false | ||
rounded | Fully rounded corners (pill shape). | Boolean | false | ||
glow | Soft colored glow behind the control. | Boolean | false | ||
ghost | Minimal style with no background until hover. | Boolean | false | ||
light | Tinted background using the color at low opacity. | Boolean | false | ||
flat | Removes elevation and border emphasis. | Boolean | false | ||
block | Stretches to the full width of the parent. | Boolean | false | ||
tag | Root element tag. Becomes a router-link when `to` is set. | String | button | ||
type | Native button type when `tag` is `button` (button, submit, reset). | String | button | ||
icon | Shortcut for `iconLeft`. | String | |||
iconLeft | Icon name shown before the label. | String | |||
iconRight | Icon name shown after the label. | String | |||
to | Vue Router location; renders as a link when set. | String Object | |||
tooltip | Tooltip text shown on hover. Prefer the tooltip slot for custom content. | String | |||
tooltipPosition | Tooltip placement relative to the button. | String | top |
slots
Name | Description |
|---|---|
default | Button label and content. |
tooltip | Custom tooltip content; overrides the `tooltip` prop. |
methods
Name | Description |
|---|---|
focus | Focus the underlying control. |
blur | Remove focus from the underlying control. |
ButtonGroup
props
Name | Description | Type | Default | Values | Required |
|---|---|---|---|---|---|
size | Control size. One of xs, sm, md, lg, xl. | String | md | xssmmdlgxl | |
color | Theme or CSS color used for the control accents. | String | |||
disabled | Disables interaction and applies disabled styling. | Boolean | false | ||
loading | Shows a loading indicator and blocks interaction. | Boolean | false | ||
loadingLabel | Accessible label announced while loading. | String | |||
loadingStatus | Loader visual status (for example active or indeterminate). | String | active | ||
outlined | Outline style with a transparent fill. | Boolean | false | ||
rounded | Fully rounded corners (pill shape). | Boolean | false | ||
glow | Soft colored glow behind the control. | Boolean | false | ||
ghost | Minimal style with no background until hover. | Boolean | false | ||
light | Tinted background using the color at low opacity. | Boolean | false | ||
flat | Removes elevation and border emphasis. | Boolean | false | ||
block | Stretches to the full width of the parent. | Boolean | false | ||
tag | Root element tag for the group wrapper. | String | div |
slots
Name | Description |
|---|---|
default | Grouped buttons (typically x-button children). |