Buttons
Overview
Description
Buttons are an interactive element that prompts users to perform an action, such as submitting a form or navigating a page. Key aspects include button types (primary, secondary, ghost, icon), clear and action-oriented labels, understanding different button states (hover, focus, disabled), and ensuring accessibility through color contrast and sizing.
Uses
- Trigger actions: buttons execute tasks when clicked or tapped, like submitting data, starting a process, or confirming a choice.
- Provide clear guidance: buttons communicate calls to action (CTAs) to the user, guiding them through a process or completing a task
Types of buttons
- Primary buttons: the most prominent button, used for the most important action on a page, often with a solid, bold design.
- Secondary buttons: used for less prominent, secondary actions, providing a clear visual hierarchy.
Value to user
- Provides clear calls-to-action.
Best practices
- Use only one primary button per view.
- Keep labels concise and actionable. Button labels should be action-oriented, clearly stating what action will occur.
- Ensure touch targets are large enough.
Accessibility notes
- Ensure sufficient color contrast between the button and background to aid users with visual impairments.
- Sizing and responsiveness: adapt button sizes for different devices and screens, with smaller buttons for mobile and larger ones for desktop.
- Consistency: maintain a consistent set of buttons within a design system to ensure a cohesive user experience
Can’t find what you’re looking for? Get in touch