alright then gang so as you can see I've
stripped back the home component from
the last video so we're now left with
just this h1 inside this div and now I'd
like to dive right into our first
beautify component and that is going to
be the button so let's create one of
these and to do that we say V - BTN so
this is the button component remember
all the UT 5 components start with V -
this one is called BTN so inside here
what we can do is just type some text
like click me and if we save this and
preview it in a browser you're going to
notice this button or write off so
that's pretty neat right we didn't have
to do much work at all to get this
button now we can't customize this first
of all let's do that with some of those
classes that we've seen to control the
color so I say class is going to be
equal to pink and this would give it a
pink background and also white text so
white double hyphen text save that and
view this in a browser again now we can
see it's pink background and white text
awesome so that looks pretty nice and it
didn't take long to do at all all right
then let's do another example V - BTN
again this time we'll say click me again
but instead of using these classes what
I'd like to do now is use a prop called
color so we can also color certain
elements certain components using this
color prop instead of using these
different classes now it's going to do a
similar thing if I say in here pink and
save this then we're going to notice
this is pink as well now okay we have
black text but that doesn't really
matter we can control that with either
the dark prop like that or by using a
class which colors the text white that's
not important I just wanted to show you
that this prop right here this can be
used to control the color of the button
as well instead of using this as a class
now also I want to make this a depressed
button by that I don't mean you know
suicidal or anything like that I just
mean depressed as in pushed back against
the page so it removes
this shadow right here so let us now
give this a depressed prop and that
makes it flush against the page and we
remove that box shadow so that looks
nice right all right then let's do
another example
we'll say V - BTN and inside again we'll
just say click me and then this time I'm
going to give this a color prop again
and this color is again gonna be pink
and I'm gonna give this now a prop of
flat now what does flat do well a first
impression you think it would do
something similar to this it takes away
the drop shadow and it does do that but
what it also does is make the background
transparent but hang on we said that we
wanted the color to be pink so how is
this gonna work well if we save this
let's just preview it and see what
happens and now we can see the
background is transparent there's no
drop shadow at all so it's taken that
off as well but this time the color of
the text is pink and when we hover over
it we get a light pink in the background
so then when we apply this flat prop to
a button this color prop instead of
controlling the background because the
background is now transparent because of
the flat prop this color prop now
controls the text color and the hover
color when we hover over the button
alright so remember again depressed just
makes it flat and the color prop
controls the background flat just takes
away the drop shadow and the background
color makes it transparent and the color
prop controls the foreground color and
the hahvah color alright so there's
three simple examples all very easy to
do now a lot of the times when we see
buttons we see icons in the bottoms
right so let's give that a whirl as well
so we'll say V - BTN and this time I'm
gonna make this depressed again so that
we remove the drop shadow but we
maintain the background color I'm going
to give this a class this time instead
of using the color prop this class is
going to be pink and it's gonna be white
text so white double hyphen text then
inside here what we want to do is
place an icon so this is going to be the
second component we see it's V - icon
now this is going to use material design
icons by default and there's loads of
different icons that we can use and all
we have to do is place in the icon
keyword right here so for example if I
say email like this and save it then we
view this in a browser we can see the
email icon okay now how do we know what
these keywords are well like I said this
is driven by material design icons so
the best way to find out is to go to the
material dile website I'll leave this
link down below and scroll down and you
can see all of these different icons we
can use right here and the keywords are
just underneath so we can see this is
settings underscore brightness this one
is shopping underscore basket we've used
one called email right here all right so
we have the icon that's very easy to use
all we say is V icon then the keyword
inside now what I'd like to do is also
add some text to this button so let's do
a span tag and inside we'll say email me
save that and preview in a browser and
it looks something like this
now this looks okay but the spacing
between the icon and the text isn't
really enough I don't think so in order
to combat that all we need to do is
position this icon to either the left or
the right of the button using the left
prop or the right prop so I say left
save that and preview this in the
browser and that looks now a lot better
so that was really simple right we've
created this nice little button with an
icon in what three lines of code and no
CSS whatsoever so beautifu is taking
care of all of that for us now what I'm
gonna do is just copy this and paste it
down below because we're going to do
just a couple of different variations so
the next one I'd like to do is a small
button so by default these are all kind
of standard sized buttons if I make this
button small by using the small prop
that's going to decrease this in size
now let's save that and view this in a
browser we can see this is now a small
button I think the icon is a little big
so also
we can say small as he prop in the icon
as well and that makes the icon smaller
so now this looks a bit better so that's
a small button for us okay cool
what I'm gonna do is paste this button
again and this time we'll make it large
so we'll say large as a prop instead
save that view in a browser and we can
see this is now a large button now I'm
also going to make the icon large right
here and what I'm also going to do is
position this to the right now if I save
this now and preview in a browser it's
not gone way over to the right it's
maybe large which looks better it's not
gone way over to the right but that's
just because it's first in the template
so all we need to do is switch this so
it's below the span tag save it again
view this in the browser and there we go
now it's over on the right and it's a
large icon inside a large button cool
alright let's do one more example so I'm
gonna paste this down below again and
that's the wrong thing so let me just
grab this and paste it down here okay so
this time I'm gonna take off the large
I'm gonna make this small like so I'm
gonna make it dark as well so we get the
nice foreground color and I'm gonna
change the background color to purple
now I'm not going to use a class this
time I'll use the color prop just to
show you we have different ways of doing
this so remember the color drives the
background of the button unless it's
flat in which case it controls the
foreground of the button
okay so right now because this is not a
flat button it's a depressed button it's
controlling the background of the button
so it's gonna be purple it's also going
to be small and the text will be white
because we've used a dark prop as well
and that makes the text white okay
so inside here I'm just going to do an
icon we're going to take away this spine
right here and this icon I'm gonna take
away right as well and it's going to be
called favorite it should be a little
heart so if we save this now view this
in a browser we can see this thing right
here inside the
now what I'd like to do is make this
button smaller maybe a circle around
this heart so how do we do that well
that kind of button is called a fab so
all we need to do is placing the fab
prop right in that button save it
preview this in a browser and now we can
see that little circle with the heart so
this is good if you want a little
favorite button on something so we user
can click on that to favor at that item
all right so there we got my friends
that's buttons for you again there's
loads of different props for buttons
loads we can do with buttons and all you
need to do is check out the button over
here so if we go to buttons like so
you're going to see all of these
different things we can do with them all
of these different props we've not seen
a lot of them but I would advise you
just to check those out it's also going
to give you code template to achieve
these different designs right here like
so alright so there we go my friends
that is buttons for you in the next
video what we'll be doing is taking a
look at breakpoints and visibility