All language subtitles for 17. Buttons Overview

Buttons are some of the most common components that you'll use throughout your applications.

They are one of the simplest ways to allow users to interact with your application and usually allow

them to perform actions or to select options they come in all sorts of shapes sizes and colors and thankfully

material UI makes it really intuitive to handle a variety of different cases before we go and start

using the button in our application.

Let's go take a look and see what options they provide for us.

Already all.

And here we are at the material UI documentation page under components inputs and then buttons.

I think the everyone for the most part knows what a button is.

So I'm not going to spend too much more time just going over that you know.

It allows your users to take actions and make choices with a single press but we're really more interested

in what type of buttons material UI has to offer.

You can see here already that they provide a number of different presets.

You can choose from and then customize.

Further if you need to but let's take a look at how all of these buttons are actually working and the

different props that they use to make each one.

You can see these are all contained buttons and they're distinct by using elevation and fill as opposed

to just an outline so you can see all of these at the bottom here.

You can see they are all filled in as well as having a drop shadow except for the disabled button and

these are all called contained buttons.

So that starts with the variant of contained that's going to give us that raised full button look and

then you can change the color based on the material UI theme with primary or secondary if you needed

to use a color besides primary or secondary.

Then you can do so by using a class name and then specifying a background color in these styles object

to create the disabled button you see it just takes the disabled prop so simple enough there and that's

basically all there is to these basic buttons.

There just the button component with the specified variant and then a color if you so choose let's keep

going down and take a look at some of the other buttons like here you see the text buttons and so these

are less pronounced.

You see they don't have a fill or the drop shadow but they are still buttons just the text if you want

to create these text buttons you can see here that we do not specify a variant but actually just use

a basic regular button in place whatever text we would like inside.

That simply renders the text inside as a button that can be pressed to trigger an action.

We'll keep going.

And here you see the outline variety.

So if we go here the variant of outlined.

So this gives us not just the basic text to look like above and not the field in look like the contained

buttons but it gives us the just outlined look and that is just by specifying the variant outlined all

of the rest of the props like color and disabled are all going to work exactly the same no matter which

variant you choose.

You also can make grouped buttons which are styled differently as you see here to show the unity between

a set of actions if you view the source code for the grouped buttons you can see that it uses a button

group component from material UI core to wrap the buttons so just remember that you need the button

group component.

If you want to combine your components into this button group style and below there's a similar option

but instead of having other options it has a dropdown from which you can select another option.

And in this example that changes the action that you can perform.

This is done also using the button group component but this time the two buttons within your button

group is first the actual button that you want to have performed the action say here with the on click

handler and then next to that it has a another button but inside it has the arrow dropdown icon.

So they simply place an icon inside of another button component and wrap both of those buttons with

the button group to give you this dropdown effect.

The other kind of buttons that they have available are floating action buttons and these are buttons

that come in two variants regular and extended.

And this allows you to create a button that always stays on the screen providing quick and convenient

access to a commonly performed action the floating action button is its own component here seen fab

and then you're able to specify the variant of extended or leave it as the default.

The extended variant simply has a text along with the icon whereas the other fabs you simply put an

icon on the inside.

After floating action buttons here they show you the size prop that you can use on any of the buttons

whether it is a floating action button a text button a contained button and outlined button or even

your extended floating action buttons.

You can all use the size property to specify a default width.

You can also change the width to custom sizes by setting the width on these styles object under sizing

go down here.

It shows you can also add your icons to buttons which we will be doing so we'll be going over that.

Or you can just simply have the icons themselves as buttons which are used again for commonly performed

actions similar to the floating action button.

Although the floating action button is fixed on the screen in a certain position and these will just

be used where you actually just need an action performed

you can customize buttons as well.

Of course which I've talked about and we'll be going through and doing that pretty extensively so you'll

see that in just a minute.

And here's an example of some even more complex buttons that material UI is able to create we will actually

be creating some complex buttons for the estimate calculator so you'll also get a look at how that works.

The last part of the documentation for buttons in material UI is an example of how you can use a third

party routing library such as react router to combine your button components from a material UI with

the link component from react router you see here they use the component prop on the button and that

allows them to pass the link and all of its properties and functionality to the button components.

Using the component prop we are then also able to add the two property which would be passed to the

link directly on our button and all of the props that are not used by the button component itself are

passed down to the component that we specify.

This allows us to put our two property with our root for the link right on our button without having

to pass it down explicitly that's another really helpful feature that I like about material UI that

enables some really interesting behavior which you're going to see later on but I will be covering the

complete react router integration so you don't have to worry about this too much as we'll go over that

in detail in a couple videos.

But that really is about it to the buttons in material UI and you see that they provide a pretty dynamic

range of options for you to choose from making it really easy to then build on those default styles

to get the buttons to look exactly how you want.

For any application or design with that under our bill it's obviously time to go and put it to use by

building the estimate button for our header.