The Role

Buttons play an important role in a design system by:

• Consistency: By defining a standard set of button styles, colors, and behaviors, a design system ensures consistent use of buttons throughout a product, which can improve usability and user experience.
• Reusability: Buttons can be created as reusable components in a design system, making it easier for designers to quickly create new interfaces and reduce repetitive work.
• Accessibility: Buttons can be designed to meet accessibility standards, such as providing clear labels, appropriate contrast, and responsive behavior.
• Feedback: Buttons can provide feedback to users, such as indicating when an action has been completed or when an error has occurred.
• Affordance: Buttons can provide affordance to users, making it clear what actions are possible and how they can be initiated.
• Branding: Buttons can be designed to reflect a brand's visual style, such as using specific colors, typography, or iconography.

By creating a set of standard button styles and behaviors, a design system can ensure consistency, improve usability, and provide a foundation for design and development work

Basic Rules

First, let's point out some basic rules for buttons (examples will then be explained in detail below with GoFundMe’s style):

• The role of a button communicates the action that will be performed when the user interacts with it.
• There are three styles for buttons:
  • Filled: Each page should contain only one filled CTA.
  • Outline: Outline buttons are the default as they are more common.
  • Ghost: Ghost buttons do not contain a visible outline, but a background appears on hover; they provide the user with a larger tap target than buttons styled as links.
• There are three types of buttons:
  • Primary: For the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header, modal dialog, or side panel).
  • Secondary: For secondary actions on each page. Secondary buttons can only be used in conjunction with a primary button. As part of a pair, the secondary button’s function is to perform the negative action of the set, such as “Cancel” or “Back”. Do not use a secondary button in isolation and do not use a secondary button for positive action.
  • Error: For actions that could have destructive effects on the user’s data (for example, delete or remove).
• There are four states for buttons:
  • Default: An enabled state communicates an interactive component or element. Also as known as Default.
  • Active: The active state can be used for the 'click', or down press of a button, and may often resemble the look of a 'pressed' button.
  • Focus: A focus state communicates when a user has placed a cursor above an interactive element.
  • Disabled: Disabling a button serves to prevent invalid form submission, for example.
• There are three sizes for buttons:
  • Large: Used for all primary call-to-actions.
  • Medium: Used on forms and secondary call-to-action.
  • Small: Used on forms, nav bars, and places that require a small call-to-actions.

<aside> <img src="/icons/clipping_gray.svg" alt="/icons/clipping_gray.svg" width="40px" /> I noticed that GoFundMe’s button style is at times inconsistent. One page had rounded corners, other pages had regular rectangles. In this specific instance, I stuck with regular rectangles and gave them states and styles that were lacking.

</aside>