Component System with Material UI: Button
Published: 2022-01-17 15:30:24

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](https://www.figma.com/file/a94lX91ZmYGIDBxvb8shwLn8/00.-Styleguide---Library?node-id=6495%3A12616)

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](https://www.figma.com/file/a94lX91ZmYGIDBxvb8shwLn8/00.-Styleguide---Library?node-id=6495%3A12616)

![Button Style guide figma ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cfbjlepc41xy7f4tccp.png)

---

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.

![mui buttons variants](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qe9nwz55z1a9b7g0ure.png)

Here is how the [VTEX Design Sistem](https://www.figma.com/file/a94lX91ZmYGIDBxvb8shwLn8/00.-Styleguide---Library?node-id=6495%3A12616) buttons guide looks implemented using the theme api from mui.

{% gist https://gist.github.com/GonzAVic/f96c0e63af7f18a6b7af237c68fbb01d %}

{% codesandbox 9eim9 initialpath=/buttons-vtex module=/src/ButtonsVTEX.js %}

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.

{% gist https://gist.github.com/GonzAVic/7ed8da1a4ee57ca6b3e571b8e31941a7 %}

{% codesandbox 9eim9 initialpath=/buttons-custom module=/src/ButtonsCustom.js %}

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](https://www.pauapp.com/collections/?collectionId=61e080cc1c2b700018c5af22)