Form button
When form buttons are clicked they trigger an action that transforms the state of the form. They are used to finalize or cancel the form process (i.e. "Register", "Cancel", etc.) as well as utility functions (i.e. "Add row", "Delete", etc.).
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Forms
Demo
Configure: select the dropdowns below to display the variety of options that a form button supports.
Usage best practices
Provide visual feedback once the form has been submitted successfully. The visual feedback acts as an acknowledgment and reassures the user that their form is received and they do not need to click the same button again.
Visually differentiate primary, secondary and miscellaneous actions in a form, use:
- primary button is for primary type actions such as a form submission
- add right arrow icon to further encourage users to take the action
- secondary/text button is for secondary type actions such as a form cancellation
- indicates smaller action
- it can be used alongside the primary button
- utility button for miscellaneous actions on a form such as adding or deleting a row
Primary button is for primary type actions such as a form submission
- add right arrow icon to further encourage users to take the action
Secondary/text button is for secondary type actions such as a form cancellation
- indicates smaller action
- it can be used alongside the primary button
Utility button is for all the other miscellaneous actions on a page.
Disabled button is a type of form validation. The button is unusable and unclickable until some other condition has been met, i.e. selecting a checkbox, filling in an input. It can be used to prevent a user from making the mistake of clicking or tapping the button prematurely in a form.
Icon button contains only an icon and no (visible) accompanying text. It can be used to add or subtract a row on a form.
Do
Highlight only primary action, such as a form submission.
Provide a descriptive label for the buttons to ensure that users have a clear understanding of what to expect once the button is clicked.
Use disabled button only when an active inline validation is insufficient.
Use icons that clearly communicate their meaning.
Use icon button only when screen real estate is very limited, otherwise use text label all the time.
Ensure icon buttons have accessible label for the screen readers.
Don't
Do not use more than one primary button on a form as this may confuse the user as to which action is most important for them to take.
Do not use the "Reset" button as it most often hurts the users such erasing all the information that they entered. In such cases it would be detrimental to user to lose all the input data.
Do not show only disabled button without any other prompts to help users recover from errors.
Do not use icon button for only aesthetic purpose.
Do not use ambiguous iconography.