Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

plasma/src/components/Button/usage.md

Go to file
 
 
Cannot retrieve contributors at this time
Rules Spacing Animation Disabled state
22 lines (19 sloc) 1.18 KB
Raw Blame
Open in GitHub Desktop

Rules

  • Text on buttons should always use the Bold 5 text style.
  • Text on active buttons is always WeWork Black color.
  • Button height is 38px (40px including top/bottom border of 1px).
  • No icons on primary, secondary or tertiary style buttons.
  • Icons can be used in link style buttons, where applicable.

Spacing

  • Buttons have left/right padding of 20px (except for link buttons, which have no padding).
  • Buttons contained in narrow spaces (e.g. filters) should fill 100% of the width available to them. This helps with - cleaner alignment with other elements in that column, and also aligns multiple buttons when stacked.
  • If multiple buttons are horizontally aligned, there should be a 20px margin separating them.
  • If multiple buttons are stacked vertically, there should be a 10px margin separating them.

Animation

  • There is a subtle fade transition from normal to hover state on buttons.
  • Loading animation (spinner icon) on buttons found here ↗.

Disabled state

  • All button styles follow the same disabled state:
  • No background color (opaque fill).
  • All colors including text, border and any icon are black (#000) or white (#FFF).
  • Disabled button has an opacity of 10%.