Widgets
Actions
The Button, and how a page tells the user what happened.
In the admin: Design form › Widgets › Actions
A Button runs a function of the Code on click.
Messages (Saved, Could not save) aren't widgets: Code shows them with dataview.notify.
Button
UButton · Nuxt UI
Runs a Code function on click.
Props
| Prop | Code | Takes | |
|---|---|---|---|
| Color | color | ƒ | One of the theme's colors - primary, error, success... |
| Variant | variant | ƒ; solid, outline, soft, subtle, ghost, link | Its style: filled, outlined, soft... |
| Size | size | xs, sm, md, lg, xl | From xs to xl - Default is md. |
| Icon | icon | ƒ | An icon at its start. |
| Trailing icon | trailingIcon | ƒ | An icon at its end. |
| Type | type | button, submit, reset | Submit sends the form it is in. |
| Square | square | As wide as it is tall - for an icon alone. | |
| Full width | block | Fills the width of its container. | |
| Loading | loading | ƒ | Shows a spinner while something is busy. |
| Disabled | disabled | ƒ | Shown greyed out - it can't be used. |
Also: Label label (ƒ).
Events
| Event | Code | Receives |
|---|---|---|
| Click | click |
Example
{
"widget": "UButton",
"name": "assign",
"props": {
"label": "Assign",
"icon": "i-lucide-user-check",
"color": "primary"
},
"bindings": {
"loading": {
"formula": "{{vars.assign.status}} == \"pending\""
}
},
"emits": {
"click": "onAssignClick"
}
}