Working with Button Styles and Sizes

Style Kits offer a single source for controlling the Button styles and the corresponding sizes.

By default, when you drop a Button Element into your layout, it comes in Small size, and with a specific style. From the element panel, you can assign several sizes to the button, ranging from Extra small to Extra Large.

Managing Button Styles from the Style Kits panel

Style Kits allow you to control the style for every button in your layouts and templates. In the Style Kits sidebar, navigate to the Buttons panel, and there you will find a set of controls that interact with your buttons.

You can also set a different style for each button size, using the XS-S-M-L-XL tabs at the top of the panel.

A recipe for quick button styling

It's easy to achieve a consistent styling for all your buttons doing a quick setup.

In your layout simply drop 5 instances of the button widget. You can set a different size for each one of them in order to have all the five available sizes in one place.

Go to Style Kits and start tweaking the Styles for each button size. I usually start from the biggest to the smallest.  

When you are done with setting the button styles in your Style Kit, you might want to update it, in order for the new button styles to be included in it.