Button Widget
The button widget provides a simple clickable button and is typically used with widget actions to navigate to a new app page or to invoke a cloud-side automated action.
A text button is used to display text with optional prefix and suffix icons. If you want an icon button without text, use the Icon widget.
Configurable components
| Name | Description |
|---|---|
| card | Background button card component |
| primary | Button component |
| prefix | Button text prefix icon |
| suffix | Button text suffix icon |
Widget Properties
| Class Name | Description |
|---|---|
| form | Name of the form to submit to. |
| value | Button text to display if widget.text not set |
| prefix | Button prefix icon |
| suffix | Button suffix icon |
| text | Button text |
Common CSS Properties
These CSS properties configure the underlying button component.
| Property | Description |
|---|---|
| background | Background color of the button |
| color | Text color of the button |
| border-radius | Round the button corners |
| box-shadow | Add a shadow to the button |
Vuetify CSS Properties
Set these CSS properties to modify the underlying Vuetify button component.
| Property | Description |
|---|---|
| --w-variant | Set to elevated, flat, tonal, outlined, text or plain. |
| --w-block | Set to true to make the button full width. |
| --w-density | Set to compact, default or comfortable. |
| --w-ripple | Set to enable the ripple effect. |