Starter

This example demonstrates documenting a hypothetical Button component that supports variants, icons, text, and padding

import { VariantButton } from 'component-controls-stories';

In the Playground, you can view the source code, apply zoom or background...

Name	Description	Default
text	button label of text string	-
variant	variant kind disabledprimaryaccentsuccesswarningerror	primary
fontSize	font size for the Button label number	18
icon	icon kind nonesearchleft-arrowright-arrowdown-arrowup-arrow	none
iconSide	on which side of the label should the icon be placed leftright	left
iconSize	icon size smallmediumlarge	small
padding	padding variants smallmediumlarge	medium

	Name	Description	Default
VariantButtonProps(8 properties)
	text	button label of text string	-
	variant	variant kind disabledprimaryaccentsuccesswarningerror	primary
	fontSize	font size for the Button label number	18
	icon	icon kind nonesearchleft-arrowright-arrowdown-arrowup-arrow	none
	iconSide	on which side of the label should the icon be placed leftright	left
	iconSize	icon size smallmediumlarge	small
	padding	padding variants smallmediumlarge	medium
	isPrimary	boolean switch for primary variant boolean	false
AllHTMLAttributes(106 properties)
HTMLAttributes(43 properties)
AriaAttributes(48 properties)
DOMAttributes(161 properties)
ClassAttributes(1 properties)
Attributes(1 properties)

Date	Author	Commit Message
5/17/2021	atanasster	feat: include/exclude controls as function
5/11/2021	atanasster	fix: icon type
4/20/2021	atanasster	docs: refactor starter story for tests

3 commits

package	imports	peer
@primer/octicons-react	SearchIconArrowUpIconArrowRightIconArrowLeftIconArrowDownIcon
react	ReactFC

<button

style

button

<div

style

div

<Icon

size

Icon

<div

style

div