Implement Button component

Current specs

• Border width: 3px
• Font: Roboto Mono, monospace
• Variants:
  • Primary
  • Info
  • Danger (on the Setting page)
  • Link (on the donation modal)
• Sizes:
  • Large
  • Medium (default)
  • Small
• States:
  • Disabled
  • Hover state
• Button types:
  • type="button"
  • type="submit"
• Themes:
  • Light
  • Dark
• Can be a link (supports href prop)
• Can be used as a block (stretch)
• Supports text + icon
• Accepts ARIA attributes

What’s missing

• Loading state
• Focus outline
• Active state

Screenshots

Usage	Light theme	Dark theme
Primary
Primary hovered
Primary disabled
Danger
Danger hovered
Link
Link hovered
Info
Info hovered

Implementation plan

Use the bootstrap v3.3.7 stylesheet for styling references.

Props interface

Prop	Type	Required	Default	Note
variant	'primary' | 'danger' | 'link'		'primary'
size	'large' | 'medium' | 'small'		'medium'
type	'submit' | 'button'		'button'
disabled	boolean			Use aria-disabled under the hood (ref)
loading	boolean
loadingText	string			Required if loading is true
block	boolean
onClick	React.MouseEventHandler
href	string			Render an a instead of a button element if this prop is defined

Spacing and typography

The current values of font size, line height, and padding from Bootstrap seem a bit strange to me, as there are some odd numbers in there, which I think would add some challenges in scaling/positioning. Now that we switch to Tailwind, my proposal is to adopt its system and slightly adjust the styling of our component.

Size	Current	New
Small	padding: 5px 10px font-size: 16px line-height: 1.5	padding: 4px 10px font-size: 16px line-height: 1.5
Medium	padding: 6px 12px font-size: 18px line-height: 1.42857143	padding: 6px 12px font-size: 18px line-height: 1.42857143
Large	padding: 10px 16px font-size: 23px line-height: 1.3333333	padding: 10px 16px font-size: 24px line-height: 1.3333333

References:

• Tailwind padding values
• Tailwind font size and line height customization

What’s not included

Component	Screenshot	Why
Call to action button		Should be a standalone component, since its styling is dissimilar to the normal button
Dropdown button		Should be a standalone component with the support for menu items built in

Rough delivery plan

(TBU)

• Remove the stub Button component with a new, basic one (variants and sizes) - #45421
• Support ref - #45480
• Add support for info variant - #45541
• Add support for hover state - #45541
• Support various button states and theming - #45665
  • Ensure active and focus states are covered
• Support inline and block usages - #45665
• Support link usage - #45671
  • Ensure that we render a button instead of an a if disabled is true
• Build ButtonGroup (probably a low priority since there isn’t a use case for it yet)

[huyenltnguyen]

Also other than the styles, what are the challenges of having the CTA be in the same component with the rest of the buttons?

Yeah it’s mostly the styles. we don’t seem to have a CTA button in dark theme, and the button is currently a link (<a>). I think it would be easier to maintain and develop if we have the component as a separate one, rather than as a variant.

There are some custom styles that utilizes bootstrap styles such as.btn. We should either include them in the component for now, or re-adjust the custom styles when we move the buttons to production.

Agreed. The custom styles have eaten a lot of my time, as I have to decide whether I should copy-paste the styles or try to map the them to what Tailwind has 😅 I’ve been opting for the latter, it takes a bit more time but will help reduce code that we have to clean up later.

[ahmadabdolsaheb]

Just a heads up that we have a btn-info in the codebase. The color needs a little work but we can change that later. You could view it in the settings page of the /settings page or in production next week 😃