Add a row to a table. Open a hyperlink. Send a Slack. Copy a doc.
These are all things you can do with buttons in Coda. But as more makers publish their work with Coda and introduce their teams to systems of work in their Coda docs, we’ve also learned that we could help buttons seem more like, well, buttons!
Following some user feedback and design updates, I’m please to share a few tweaks we’ve made to buttons that give you more control over how they look, and help your collaborators more readily understand that they can click and take action in your docs!
A new, buttoned-up shape
We’ve rounded the edges to help buttons look more beautiful. The shape is common in buttons around the web so it should hopefully make them more inviting for others to click on.
Heads-up: The new shape makes the buttons a touch wider, so you may want to resize button columns if you see your button text wrapping to another line.
Way more icon options
Until today, you had a fixed set of 20 icons to style your buttons. And while we love the ‘cup of coffee’ icon here at Coda, we recognize our maker community has wanted additional customization options. Now, when adding buttons you can search the full library of icons that are available for pages to best reflect your style and purpose.
Three different sizes
Since launching new options for text sizes earlier this year, we’ve seen docs take advantage of both standard and large text sizes. However, when changing the size of your text, you might’ve noticed that your buttons stayed the same size.
Now, when adding buttons to a page, you can choose whether they are sized Small, Medium, or Large. The existing buttons in your doc are considered small, so you can go now make them larger using this setting. (This option is available for buttons that live on a page, not for button columns in a table.)
Whether you’re trying to help your buttons match the overall style of your doc, or trying to increase interactions in your doc, we hope you enjoy experimenting with some of these new options. (Tip: In a hallowed marketing A/B test case-study, a “Big Orange Button” on a landing page lifted conversions by ~32% ー you can try adding one to your doc to see what happens!)
You can customize your button size and icons in the same button configuration menu where you’ve always chosen button colors and set-up their actions. Learn more about setting-up buttons in this FAQ.
We hope this helps your docs feel even more like your own!