Button
Buttons initiate actions on a page.
Primary button
Primary buttons indicate the main action that a user is expected to take. In general, it is assumed that there will only be a single Primary button on a page.
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.
Action button
Action buttons indicate that a main action will be taken will this button is pressed. It should be used when the state of the application will change in a meaningful way.
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.
Selection button
A selection button is a standard button that should be used to choose an option, but one that will not necessarily lead to a change in the (perminant) state of the application. For example, you might use a selection button to change to italic text. Changing to italics itself does not affect the user's permanent state (like a 'save' action would).
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.
Navigation button
A navigation button should be used to indicate that pressing it will result in the user being taken to a different part of the application.
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.
Destructive button
A destructive button is one that results in some of the user's save state being destroyed.
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 button
A button that only has an icon in it. Note that you can add icons to the other button types without requiring this type of 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.
Link button
A link button is used where a normal hyperlink would be placed, but where you wish for some specific action to take place.
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.
Naked button
A naked button has no styling. It should rarely, if ever, be used. Its purpose is to add interactivity to html blocks.
The following has been transformed into a 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.
Unstyled button
You should not use unstyled buttons in your application, but if you do, this is what they're going to look like:
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.