Button
A button is an interactive element that triggers an action or event when clicked or tapped. Buttons are typically styled to be easily identifiable as interactive components, often featuring distinct colors, shapes, and hover/focus/active states.
Usage
Primary Action: Often used to highlight the most important or commonly used action on a page or modal.
Secondary Actions: Accompany primary buttons, offering alternative or less critical actions (e.g., “Cancel,” “Learn More”).
Contextual Actions: Buttons within specific parts of the UI (cards, toolbars) allow quick interactions relevant to that context.
Use cases
Submitting a form (e.g., “Submit,” “Sign Up”)
Triggering a specific function (e.g., “Save,” “Delete,” “Refresh”)
Opening or closing a modal/dialog (e.g., “Open Settings,” “Close Window”)
Not to be confused with
Link: Although links and buttons may look similar, a link navigates to another page or section, while a button typically performs an action without changing the page context.
Switch: A toggle (switch) changes between states (e.g., on/off). A button can also change states, but toggles are explicitly designed for two-state switching, often reflecting an immediate setting change.
Best practices
Use descriptive labels
Ensure that button text is concise yet clearly conveys the action.
Avoid overly generic labels like “Click Here” or “Go.”
Follow visual hierarchy
Differentiate primary and secondary actions using color, weight, or shape.
Keep the most important action (primary button) visually prominent.
Provide feedback
Include hover, focus, and active states for visual feedback.
Use loading indicators (e.g., spinner) or disabled states when an action is in progress or not available.
Respect accessibility
Ensure the contrast ratio between text and background meets WCAG standards.
Make buttons keyboard-navigable and include appropriate ARIA attributes if needed (e.g., aria-pressed for toggle-like behavior).
Maintain consistency
Use a standard style (color, shape, typography) across the interface.
Label actions consistently (e.g., always use “Save” instead of “Save Changes” or “Store” in different places).
Ensure the label clearly communicates the button’s intended action (e.g., “Save Changes” is more descriptive than “OK”).
Summary
The button is one of the most crucial interactive elements in any interface. It serves as a clear call-to-action that users can click or tap to perform specific tasks. While it may appear similar to links or toggles, a button’s role is to trigger an immediate action rather than navigate or switch states. By ensuring descriptive labels, proper styling, and accessible interactions, you can help users easily understand and engage with the interface.
