Work in Progress: How to Style Buttons

Some components are built by several parts. A Button component is one of those, so to achieve the style you want, you'll have to edit them separately.

Step 1: Choose the Element you Want to Style

• Select the button to be styled

• Give it a tag if it doesn't have one (On the Right Side Bar, Options Tab)

• Open the Design Tab on the Right Side Bar

• In the "Choose an element" area you'll see the different element options. In Button components we have 4 options:

• The next area on the tab is "Apply these styles to". Select which components you want to affect with these new styles.

Step 2: Style it!

• Further down on the design tab there's the "Now set your styles" area. There you'll find the most commonly used styles, and if there's one you can't find, you can always enter it as a custom style at the bottom of the list (the custom styles won't be reflected until you press enter. You can change it later)

• Have fun! You can find some recommendations in the following section:

🔘How to style hover, selected, disabled button states

Step 3: Style some States

• Below the "Choose an Element" area, there's a toggle that says "Use states". When you switch that, you'll get a few more options to play around with:

• Select the State you want and go back to step 2!