logo here
created:1/23/2021
,
updated:1/23/2021

Typescript Button

Button with react Typescript properties

Main

Figma files

Design brief

Guidelines

  • A button component with some text, optional icon, and variants
    1. primary for main, most important actions on secreen
    2. accent for less-significant actions
    3. disabled visually subdued
    4. success to indicate a successful process
    5. warning to indicate a process with potential issues
    6. error to indicate a process with an error
  • The icons selected from @primer/octicons-react
  • Allow for padding, fontSize and icon side configuration

Background colors

  • primary: #2F80ED
  • accent: #9B51E0
  • ...

Padding variants

  • small: 5px 10px
  • medium: 10px 20px
  • large: 15px 30px

Screenshots