Action Buttons
Action buttons standardise the order and appearance of common button combinations. They ensure that buttons such as Save, Cancel, and Delete always appear in a predictable position, reducing cognitive load for users.
The component renders buttons in a fixed order: Submit, Confirm, Edit, Supplementary, Cancel, Delete.
Each button is independently toggled via show_* attributes.
Default (Submit + Cancel)
By default, only the Submit and Cancel buttons are visible. This is the most common combination for form actions.
Example
Markup
Source markup is unavailable in this environment. Markup extraction relies
on debug_heex_annotations and the project source files, which
are only present during development.
Save and Cancel
Customise button text and icons to suit the context. Here the submit button reads "Save" with a save icon.
Example
Markup
Source markup is unavailable in this environment. Markup extraction relies
on debug_heex_annotations and the project source files, which
are only present during development.
Edit, Delete, and Cancel
For record detail views, hide the submit button and show edit and delete instead. The delete button is always rendered last and styled as destructive.
Example
Markup
Source markup is unavailable in this environment. Markup extraction relies
on debug_heex_annotations and the project source files, which
are only present during development.
Confirm and Cancel
Use the confirm button for two-step confirmation workflows.
Example
Markup
Source markup is unavailable in this environment. Markup extraction relies
on debug_heex_annotations and the project source files, which
are only present during development.
All buttons visible
All six button types shown together. This illustrates the fixed rendering order: Submit, Confirm, Edit, Supplementary, Cancel, Delete.
Example
Markup
Source markup is unavailable in this environment. Markup extraction relies
on debug_heex_annotations and the project source files, which
are only present during development.
Disabled states
Individual buttons can be disabled while remaining visible. This is useful when an action is temporarily unavailable, for example disabling Save until a form is valid.
Example
Markup
Source markup is unavailable in this environment. Markup extraction relies
on debug_heex_annotations and the project source files, which
are only present during development.
Custom text and icons
Every button's text and icon can be overridden. Set an icon
to "" to hide it, or set text to "" for an icon-only button.
Example
Markup
Source markup is unavailable in this environment. Markup extraction relies
on debug_heex_annotations and the project source files, which
are only present during development.
Icon-only buttons
Set text to an empty string to render icon-only buttons.
Example
Markup
Source markup is unavailable in this environment. Markup extraction relies
on debug_heex_annotations and the project source files, which
are only present during development.
With supplementary action
The supplementary slot is for context-specific actions that don't fit the other categories, such as "Preview" or "Export".
Example
Markup
Source markup is unavailable in this environment. Markup extraction relies
on debug_heex_annotations and the project source files, which
are only present during development.
Interactive demo
Click any button below to see events logged in real-time.
Click a button above...