Component System with Material UI: Button

This is another post from a series, where I'll be using Material UI (now mui) for creating a Component System that maps an already created Design System: VTEX Design Sistem

In this post I'll be setting the styles for the Button component using the createTheme mui API. For that I'll be overriding the defaults style values and also creating new variants.

You can see the Button style guide within Figma here

Buttons are a core component for any web application, users interacts and trigger action from these, so it's important to transmit the user what are the buttons hierarchy.

Mui defines 3 different button variants and 3 different sizes for each of them, this is how mui defines and separates the hierarchy between Buttons.

contained: this is the button with higher emphasis, it is meant to be used for primary actions. This is what you want your users to click on.
outlined: are buttons with medium emphasis, this variant is mostly used on "secondary" actions, those which are important, but it's not the main action in an specific context.
text: a variant with low emphasis, this variant is used for those actions that doesn't affect the main goal of your application. Also are mostly used on cards, dialogs/modals, and snackbars.

Here is how the VTEX Design Sistem buttons guide looks implemented using the theme api from mui.

As you can see on the gist above, I'm overriding the sizeSmall, sizeMedium and sizeLarge styles from the createTheme mui function to set the correct paddings and font-size for those states.

I'm also creating a new color danger and defining the main and contrastText so that, I can create the danger buttons displayed on the codesandbox as example.

I said at the beginning of the post in order to create the VTEX Button styles I will be overriding the default values for the mui buttons, and also creating new ones. But there was no need for create new variants, since mui handles very well the abstraction of the color palette and the color prop on its components.

I'll be creating some variants just to demonstrate how it can be done with mui.

As you can see on the example above, I've created 2 variants called: leftRounded and dashed.

For this I had to add a new property called variants (Array) to the MuiButton object. Each object in this array represents a single variant.

For naming a variant you can use the props: { variant: "name_of_your_variant" } and then, use the styles property on the same object to set the css styles.

Conclusion

When it comes to Buttons, most of the time there is no reason for creating new variants, unless the design system you're using contains more than the default 3 variants mui provides, or buttons with weird shapes and animations.

With a correct definition of colors you can use the color prop to define which set of "background color" and "color text" to use on each button.

Some references here