Porsche Design System

Button

Table of Contents

Usage#

The following section provides guidance for designers and developers on how to use this component in different 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.