README.md

ITP Basic React Button 🎁

Why is this a separate package? I can just define <button> inside my project?

• We need a standard implementation to build upon and to share across projects
• Built-in types
• Built-in tests (todo)
• Built-in loading styling
• Built-in fallback on href prop to <a> element
• Built-in spacing between icons, text and other children of button
• Built-in A11Y (WAI-ARIA roles and attributes)
• Built-in ButtonGroup

API

Inspired by ant-design button with stripped styling, shares the same API.

Custom API

Property	Description	Type	Default
block	block state	Boolean	false
color	can be set to primary secondary tertiary or omitted	string	-
ghost	ghost state	Boolean	false
htmlType	'submit', 'button' or 'reset'	string	'button'
loading	loading state	Boolean	false
onClick	onClick handler	Function	() => {}
prefixCls	prefix css class name	string	''
shape	'circle' or 'circle-outline'	string	null
size	'default', 'small' or 'large'	string	null
styles	imported css module (if passed, prefixed classNames will be disabled), see styles property	object	null
type	'default', 'primary', 'ghost', 'dashed' or 'danger'	string	'default'

Styles property

Property	Description	Type	Default	Required
backgroundGhost		string	-	No
block		string	-	No
button		string	-	Yes
colorPrimary		string	-	No
colorSecondary		string	-	No
colorTertiary		string	-	No
loading		string	-	No
shapeCircle		string	-	No
shapeCircleOutline		string	-	No
sizeLarge		string	-	No
sizeSmall		string	-	No
typeDanger		string	-	No
typeDashed		string	-	No
typeGhost		string	-	No
typePrimary		string	-	No

The css module should look like this:

.backgroundGhost { ... }
.block { ... }
.backgroundGhost { ... }
.block { ... }
.button: { ... },
.colorPrimary { ... }
.colorSecondary { ... }
.colorTertiary { ... }
.loading { ... }
.shapeCircle { ... }
.shapeCircleOutline { ... }
.sizeLarge { ... }
.sizeSmall { ... }
.typeDanger { ... }
.typeDashed { ... }
.typeGhost { ... }
.typePrimary { ... }