Use the form actions component in the context of a form.
Do not use the form actions component outside the context of a form.
Every form requires at least one form action. Form actions should be placed inside the form component.
The primary form action is the first action of the form and is typically the submit button of the form. A submit button is required for every form.
Make the label of the submit button clear so that the user is reminded what user input is collected, for what purpose and which action is taken when clicking the submit button. Examples are: “Send message”, “Subscribe”, “Next”, “Continue”, “Confirm”. The button should have the primary button style.
A form can also have a secondary form action.
The secondary action is typically a way to temporarily pause filling in the current form. In multistep forms, this button is used to get the user to the previous step. An other use, could be a button that saves but not submits the input the user already gave so that the user can continue filling in the form at another time. Either way, make the label of the button clear so that the user understands what the button does. Examples are: “Previous”, “Save for later”. The button should have the secondary button style.
Sometimes, in more complex multistep forms or wizards, a third form action. The third action is typically a way for the user to reset user input, go back to the beginning of the form or wizard and start over. This not a button, but a link using the standalone link style.
<div class="form-actions">
{% if primary_button %}
{% include '@input-submit' with {
value: primary_button,
} %}
{% endif %}
{% if secondary_button %}
{% include '@button' with {
text: secondary_button,
type: 'secondary'
} %}
{% endif %}
{% if link %}
{% include '@link' with {
text: link,
link: '#',
modifier: 'standalone-link back'
} %}
{% endif %}
</div>
<!-- Default -->
<div class="form-actions">
<input type="submit" value="Submit" class="" />
<a href='#' class="standalone-link back">
Cancel </a>
</div>
<!-- Simple -->
<div class="form-actions">
<input type="submit" value="Submit" class="" />
</div>
<!-- Secondary Button -->
<div class="form-actions">
<input type="submit" value="Submit" class="" />
<button type="button" class="button button-secondary ">
Save for later
</button>
</div>
<!-- Full -->
<div class="form-actions">
<input type="submit" value="Submit" class="" />
<button type="button" class="button button-secondary ">
Save for later
</button>
<a href='#' class="standalone-link back">
Cancel </a>
</div>
/* Default */
{
"primary_button": "Submit",
"link": "Cancel"
}
/* Simple */
{
"primary_button": "Submit",
"link": null
}
/* Secondary Button */
{
"primary_button": "Submit",
"link": null,
"secondary_button": "Save for later"
}
/* Full */
{
"primary_button": "Submit",
"link": "Cancel",
"secondary_button": "Save for later"
}
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 -.6rem;
> input,
> button {
@include button-large;
}
> input,
> button,
> a[href] {
margin: 0 .6rem .6rem;
}
}