Link to Framer Store

https://store.framer.com/package/panr/button

Overview

Simple but highly customizable compontent thanks to props like:

Property	Type	Description	Default
isPrimary	boolean	Adds shadow to button	false
isOutline	boolean	Makes outline button (without fill, but backgroundColor prop is still important). Disabled if isPrimary is true	false
isIcon	boolean	Shows icon inside button	true
icon	string	Icon name. Please use icon names from Material Icons Docs	pan_tool
label	string	Sets button label	Hello Friend!
backgroundColor	string	Sets fill color for default and primary button. Sets border and text color for outline button	#F59D0D
textColor	string	Sets text color. If isOutline is true this prop is overridden by backgroundColor	#FFFFFF
fontFamily	enum	Sets font family (only few basic system typefaces)	-apple-system
fontSize	enum	Sets font size (you can set value from 12 to 24)	16
fontWeight	enum	Sets text weight (you can set value from 100 to 900)	600
textTransform	enum	Sets text transform (none, lowercase, uppercase)	none
letterSpacing	number	Sets space between letters (from 0 to 50)	2
borderRadius	number	Sets button radius	8
borderWidth	number	Sets button border width	1

TIP

To create link button with proper tap target, just set button as outline and then border width to 0

---

Twitter: @panr ・ Github: panr ・ Website: radoslawkoziel.pl