One common design pattern is having two main button styles: a primary button type for important actions, and a secondary button for less important actions. In this example, we have both of these styles saved as Components.

Screen Shot 2022-12-21 at 1.50.12 PM.png

Screen Shot 2022-12-21 at 1.48.25 PM.png

With Components defined, we can efficiently manage the design of all the Button elements in our project, and ensure they’re referencing the intended design. We can easily make changes to our Components and update all the buttons at once. We can also easily swap between the Primary and Secondary button styles in-context as we work through the design process.

Component use case: Section divider

Button elements are well suited to be Components because they’re simple, occur frequently in a design project, and often use consistent styling. Let’s explore how Components can be used to style buttons.

Next

Back