A next-generation tool to create blazing-fast documentation sites
API
created:3/12/2021
updated:3/12/2021
source lines:103
comments %:30
todo lines:2

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