Skip to content

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.

Button Widget

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

NameDescription
cardBackground button card component
primaryButton component
prefixButton text prefix icon
suffixButton text suffix icon

Widget Properties

Class NameDescription
formName of the form to submit to.
valueButton text to display if widget.text not set
prefixButton prefix icon
suffixButton suffix icon
textButton text

Common CSS Properties

These CSS properties configure the underlying button component.

PropertyDescription
backgroundBackground color of the button
colorText color of the button
border-radiusRound the button corners
box-shadowAdd a shadow to the button

Vuetify CSS Properties

Set these CSS properties to modify the underlying Vuetify button component.

PropertyDescription
--w-variantSet to elevated, flat, tonal, outlined, text or plain.
--w-blockSet to true to make the button full width.
--w-densitySet to compact, default or comfortable.
--w-rippleSet to enable the ripple effect.