Standardise Buttons

[MaggieAppleton]

This pitch proposes we standardise the buttons across the site.

At the moment we don't have a consistent Button component with standardized styles. Each button on the site is styled inline on individual pages. This leads to inconsistent button behaviours between sections of the site.

For example, here's two hover effects on the same type of primary button:

Creating consistent button components that matches the priority level of the call to action will help direct users to our most important CTAs, as well as helping them predict what a particular button will do.

Adobe's Spectrum guidelines are a great base for us to build off.
Particularly the variables they use:

---

Proposed revision of our button heirarchy:

• Primary - main CTAs like 'Become a Member,' and 'Watch Now'. These should be the primary action we want a user to take on a page.
• Secondary - secondary actions like 'Watch again' or 'Tweet this article'
• Secondary quiet. A variant on secondary that is quieter – use for minor options like 'Cancel' or 'Try again'
• Tertiary - used for small functional actions like 'Edit' or 'Log out'. Often will appear in dropdown menus where there are multiple functions.
• Negative - used for major destructive actions like cancelling a subscription, deleting an account, or deleting data (eg. user-generated notes).

• Each of these buttons can be marked as disabled.
• The Primary, Secondary, Quiet Secondary, and Negative buttons can all have three size variants: small, medium, and large. All the sizes defined in the Figma file are medium. Use padding and font size to increase or decrease the button size.

Styles defined on these buttons all match the Tailwinds UI system. Specific styles can be inspected in the Figma document (link in Roam)

---

I'm not an expert on component architecture, but assume a structure where we pass variable props like <Button primary large disabled /> would work well. Will leave that expertise to others.

Once the component is built, we should document it in Storybook before implementing it across the site.