Form Buttons

A grouped set of submit, go, reset, cancel, or back buttons for completing or clearing a form.

When To Use

Use	Avoid
A grouped set of submit, go, reset, cancel, or back buttons for completing or clearing a form.	Avoid using this component when the content has a different job or needs a simpler plain-text treatment.
Use real form controls with visible labels, help text, validation, input purpose, keyboard access, and clear submit behaviour.	Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide.
Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews.	Avoid copying placeholder IDs, links, contact details, or image paths without replacing them.

Example

Code

CSS Imports

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";

Starter Markup

<div class="lds-form-actions">
  <button class="lds-button" type="submit">Submit</button>
  <button class="lds-button lds-button-secondary" type="reset">Reset</button>
</div>

Class Reference

Class	Use
`.lds-form-actions`	Groups submit, go, reset, cancel, or back controls at the end of a form.
`.lds-button`	Applies the primary action button style.
`.lds-button-secondary`	Applies a lower-emphasis action button variant.

Form Button Notes

Button	Use	Avoid
Submit / Go	Use one primary button for the main form action, such as Submit, Go, Search, Register, Save, or Continue.	Avoid multiple primary buttons in the same action row unless the form genuinely has two equal outcomes.
Reset	Use reset only when clearing the form is a common, low-risk action and the user can recover from it easily.	Avoid reset buttons on long forms, forms with hard-to-recreate answers, or destructive workflows.
Cancel / Back	Use a secondary button or link when the user needs a clear way to leave the form without submitting.	Avoid placing cancel before the primary action unless that order is required by the task flow.

Review Notes

Web

Use real form controls with visible labels, help text, validation, input purpose, keyboard access, and clear submit behaviour.

Print

Do not send online controls straight to paper. Use a separate reviewed print pattern when the final material is filled out by hand.

States And Variants

Document required, optional, error, success, disabled, focus, and read-only states.

Checklist

Brand colours, typography, and logo use are inherited from the approved master brand.
The first-read message or action is clear.
Labels, headings, links, and alternative text are meaningful.
Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.