The following segment provides instructions for designers and developers regarding the appropriate utilization of this
component in various situations.
Do:
Use buttons for actions that have clear consequences, such as submitting a form or initiating a purchase.Use buttons to indicate the next step in a process, such as "Continue" or "Next".Use buttons with clear and concise labels that accurately describe the action they perform.Use the primary button for the most important or desired action, and use the secondary button for less important or
secondary actions.Use icons in buttons to enhance their meaning, but ensure the icon is relevant and easily recognizable.Use disabled buttons to indicate actions that are currently unavailable or incomplete, and provide context for why the
button is disabled.
Don't:
Don't use buttons for non-actionable elements, such as decorative graphics or text.Don't use ambiguous or unclear labels for buttons, as it can lead to confusion for users.Don't use too many buttons on a page or in a single section, as it can overwhelm users and reduce usability.Don't use primary and secondary buttons interchangeably, as it can confuse users and reduce the clarity of your
interface.Don't use disabled buttons without providing context for why the button is disabled. This can lead to confusion and
frustration for users.
