Button
- Louis Mardlin (Unlicensed)
Explanation:
A button is an interactive element that initiates an action or event when clicked, tapped, or selected.
Overview:
Buttons come in various styles, such as primary, secondary, and tertiary, each serving a different purpose. Primary buttons are for main actions, secondary buttons are for alternative actions, and tertiary buttons are used for less important actions. Each variant is visually distinct to communicate its level of importance and to provide an appropriate call to action.
When to Use:
To submit a form or initiate an action.
To navigate to another view within the application.
To trigger a modal or dropdown.
When Not to Use:
For actions that do not require immediate user action or attention.
When the action is not primary or critical to the user's task flow.
To display non-interactive content.
Formatting:
Ensure buttons have adequate padding and clear labeling, with text that succinctly describes the action that will be performed.
Anatomy:
A standard button should include a label, an optional icon, and padding. The label should be centered, and the size of the button should be large enough to accommodate the label and optional icon while remaining touch-friendly.
Alignment:
Buttons should be aligned with other form elements or content, maintaining a visual connection to the related items.
Placement:
Place buttons in a location that is logical to the workflow, such as at the end of a form or grouped together with related actions.
Content:
The text on a button should be actionable and lead with a strong verb. For instance, "Add User" or "Download PDF".
Behaviours:
The button should respond to user interactions with visual cues such as hover, focus, active, and disabled states.
Interactions:
The button should be easily clickable or tappable. It should provide immediate feedback when interacted with, such as a visual effect or initiating the promised action without delay.
Accessibility:
Ensure that all buttons have proper ARIA labels (Accessible Rich Internet Applications labels) and can be accessed using keyboard navigation.