Pastel UI

Buttons

Buttons communicate actions that users can take, and make choices with a single tap.


Basic Buttons

Basic Buttons come in different variants.

You can use the button class to get a default button in your website. You can use the btn-primary, btn-secondary, btn-link, btn-outlined, and btn-disabled classes along with the btn class on your buttons to get the respective variants.


Buttons with Icons

Some buttons can also have icons on them. Use icons inside the buttons with any of the variants above to get buttons with icons.


Message Buttons

Some buttons are used to convey messages. Use the btn-success, btn-warning, btn-info, and btn-danger classes along with the button class to get the respective variants.


Floating Buttons

Floating buttons are used for promoted actions and are used for most primary actions on the screen.These are generally used with icons as text in them.

You can use the btn-float class with any of the above variants to get a floating button.