Skip to content

panr/framer-x-button-component

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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