No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Edit this page
created:4/19/2020
,
updated:1/12/2021
Starter
This example demonstrates documenting a hypothetical Button component that supports variants, icons, text, and padding
Overview
In the Playground, you can view the source code, apply zoom or background...
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