Primitive : Button

Clayton Farr

Open in Framer X

🌈 More options than’s reasonable…

This component allows you to configure most anything for the humble HMTL <button>. To have to fiddle and jiddle with all of these controls for every button in your design would be a waste of time that could be spent on life’s better pursuits (like anything else, at all).

Instead, use this component as the base to create the custom button components your design, or system, call for (e.g. a “Standard Button”, “Featured Button”, “Derrick’s Button”).

Then when Derrick has to take some ‘personal time’ for putting too much money on the horses and you need to switch everything over to “Alli’s Button”, just go back to the design component you created and do a bit quick fiddling and jiddling with all the crazy controls afforded here to make Alli happy (of course, let everyone know it was a huge effort and use the extra time for those better pursuits we chatted about earlier).

🌧 Sometimes…

Sometimes when you update the component’s options you won’t see the changes shown on the canvas; this seems to be a bug in Framer. To fix, simply toggle the visibility of the component off and back on.


🌟 So what can I configure?

State active, disabled
Label content; default, hover, and focus colors
Font family, size, weight, alignment, letter-spacing, line-height, word-wrap
Width natural, 100% of parent
Height natural, 100% of parent
Padding natural (font-size), explicit (px), common, unique
Border width, radius; default, hover, and focus colors
Background yes/no; default, hover, and focus colors
Shadow yes/no; color, blur, offset, spread
Icons yes/no for left/right; default/hover art, size, position
Transitions duration
Other tab index

Button Options

Label Options

Icon Options


✨ Check out the whole family

There a few other components I’ve built for a similar purpose, and in the same fashion –


🎙 Love it, hate it, or have ideas to make it better?

Let me know – https://twitter.com/claytonfarr


Updates

4/15/19 - Configurable text alignment

Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree