Design Systems: React Buttons with the Base + Variant Pattern

Design Systems: React Buttons with the Base + Variant Pattern

Composing React buttons for design systems with the Base and Variant pattern. Design Systems are made to make the designs consistent across products. But they shouldn’t become a bottleneck for creativity. Some room for experimentation should be present. Let’s see how we can tread this fine line between flexibility and consistency using the base + variant pattern.

Design Systems are made to make the designs consistent across products. But they shouldn’t become a bottleneck for creativity. Some room for experimentation should be present. Let’s see how we can tread this fine line between flexibility and consistency using the base + variant pattern.

Suppose there’s a e-commerce platform with multiple products like the main shopping site, inventory management portal, email system. All of these are customer-facing software so they should reflect a common design language.

For that Sarah will be working on the design system and Ana will be using it in the main shopping site where people buy various products. Sarah figures out that the first priority is to have buttons inside the design system.

The buttons should be flexible enough to fit various product needs but not so much that we risk losing design consistency. When new product requirements come these buttons should be extendable too. If any of these elements are missing then the design systems adaption and impact will be negatively affected.

To accommodate all these requirements Sarah uses the Base + Variant pattern to build the buttons.

I’ve used Bit (Github) to publish the base button and its variants, to my shared Bit component collection.

Image for post

Each component is published as an independent package. That means each component can be installed as an independent package. No need to install an entire library with button variants that are irrelevant to you own project.

That also means each component will only be affected by changes to components it is dependent on. Unlike a library, changes are not global. When you maintain or install a component, you only get updates that are relevant to that specific component.

Image for post

design reactjs react javascript user-experience programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.

Enhance Your User Experience With the Modern Browser JavaScript APIs

4 Powerful APIs to give your user a better experience while navigating your website. Nowadays the web has become more important and more powerful than ever. One of the important aspects we try to achieve when building a website is providing a good user experience. Enhance your user experience with the modern browser JavaScript APIs. 4 Powerful APIs to give your user a better experience while navigating.

Enhance Your User Experience With the Modern Browser JavaScript APIs

4 Powerful APIs to give your user a better experience while navigating your website. Nowadays the web has become more important and more powerful than ever. One of the important aspects we try to achieve when building a website is providing a good user experience.