skip to main content

skip to navigation sidebar

skip to context sidebar

created:5/19/2021

updated:5/19/2021

loc

104

comments

30%

todos

2

passed

10

coverage

69%

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