Button symbol with centered text and icon in Sketch
I didn't think it was possible to have a button symbol that centered icon and text with overrides, but I somehow stumbled upon a solution that does indeed do this, and I'm still dumbfounded with why it works. In fact, it's so unreasonable that I expect it to break in any given Sketch update. But for now, I'm happily making use of this, and you can too.
This is our button symbol.
And each of these are real examples of it with overrides at different widths and different text.
Notice how the arrow icon stays correctly positioned to the right of the text? And the combo text and icon stay centered within the button? This is entirely done with a single text override on the symbol.
So how did I do this?
Starting with a button symbol, I always like to put a few instances of it nearby at different sizes to test against in real time. Each instance shown below is at a different width with a single text override.
Yes, there is a download.
Feel free to download a fully-working file here to see for yourself and make use of in your own projects.
Also check out
- Button symbol with centered text and icon in Sketch. Create a button symbol with overrides that keeps the text and icon centered within the button at any width.
- Calculate pixel-perfect columns and gutters. A quick and simple tool to calculate pixel-perfect grid systems.
- Instant FAQ in a single page app. A concept to serve quick answers to common questions in a single page experience.
- Keyboard touch input. Can your keyboard serve as tactile input?