Button
A native button with an explicit type and variant, and a link that reads as a button.
Primary, secondary, ghost and danger; the server counts every click.
Each preview is its own Live page in a frame, because this site is a Vue 3.5 app built on the Pulsar starter kit. An open list or popover stays inside its frame; in your application it opens over the page.
Installation
suprnova live:add buttonUsage
{% import "suprnova-ui/button/button.html" as button %}
{% call button::button("Save", kind="submit", action="save") %}{% endcall %}Examples
Link button
An anchor for navigation that is a real request; these open in this window.
Keyboard and accessibility
suprnova.button - a native button with an explicit type. action names a Live action for click buttons; a submit button relies on the form's live:submit and shows the action's loading state on itself. link_button is an anchor that reads as a button for navigation that is a real request.
API reference
button
| Parameter | Default | Description |
|---|---|---|
text | Required | The button text. |
kind | "button" | `button` or `submit`. A submit button relies on the form's `live:submit`. |
action | "" | The Live action a click button invokes; its loading state disables the button. |
variant | "primary" | `primary`, `secondary`, `ghost` or `danger`. |
link_button
| Parameter | Default | Description |
|---|---|---|
text | Required | The link text. |
href | Required | Where it goes: a real request. |
variant | "secondary" | As for `button`; `secondary` by default. |