https://store.framer.com/package/panr/button
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 |
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