Button
Bootstrap 4 Button with Material Design UI
Button component is an enhanced version of the standard HTML <button> element. A button consists of text and/or an image that clearly communicates what action will occur when user clicks or touches it. Propeller button component provides various types of buttons, and allows user to add both display and click effects.
Bootstrap 4 Button
Bootstrap 4 provides different classes for button based upon its purpose. For example - Include Primary Button to the code by adding .btn-primary.
Propeller Button
Propeller button consists of Bootstrap 4 HTML structure with Propeller customized classes based on material design standards. Add .pmd-ripple-effect followed by Bootstrap 4 classes to get ripple effect to button.
Raised Button
Raised Button is used to give prominence to actions in a layouts with a lot of varying content. Include Raised Button to the code by adding .pmd-btn-raised.
Flat Button
Flat Button is a text-only button and is general included in the dialogs and toolbars.
Include Flat Button to the code by adding .pmd-btn-flat.
Outline Button
Outline Button is a button with a border rather that background color. It is generally used to define secondary action. Include Outline Button to the code by adding .btn-outline-*.
Button with Icon
Button with icons provide the user with a clear visual hint about the action. To create a button with icon, add .pmd-btn-icon class.
Gradient Button
Gradient buttons let you display smooth transitions between two or more specified colors. To create a normal gradient button, add class .pmd-btn-gradient. For applying gradient with transitions, use class .pmd-btn-gradient-{vertical, diagonal, diagonal-reverse, radial}.
By default, the gradient button will pickup the primary and secondary colors defined in the _variable.scss. However, if you wish to update them, you can do it by changing the value of $btn-gradient-primary and $btn-gradient-secondary variables.
Button Sizes
Want Fancy larger or smaller button? Add .btn-lg, .btn-sm for additional sizes.
Create block level button—those that span the full width of a parent— by adding .btn-block.
Button Group
Group a series of buttons together on a single line with the button group by using .btn-group class.
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
Toggle State
Use data-toggle="button" attribute to create toggle buttons. For pre-toggling, add the .active class manually and add aria-pressed="true" to the button.
Set the toogle state for components like checkboxes and radio button groups by adding data-toggle="buttons" and .btn-group-toggle to the .btn-group. For pre-toggling, add .active class in the label tag and checked in the input tag.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the button. The table lists the available classes and their effects.
| Propeller Class | Effect | Remark |
|---|---|---|
.pmd-ripple-effect |
Supporting class which, when used with .btn adds a ripple effect to the button. |
Optional |
.pmd-btn-raised |
Supporting class which, when used with .btn makes the button look raised. |
Optional |
.pmd-btn-flat |
Supporting class which, when used with .btn makes the button flat. |
Optional |
.pmd-btn-icon |
Supporting class which, when used with .btn makes a button with icon. |
Optional |
.pmd-btn-gradient |
Supporting class which, when used with .btn makes a normal gradient button. |
Optional |
.pmd-btn-gradient-{vertical, diagonal, diagonal-reverse, radial} |
Supporting class which, when used with .btn makes a gradient button with Radial, Diagonal, Diagonal Reverse and Vertical Transitions. |
Optional |
jQuery plugin
Call the jQuery plugin to initialize the Button Ripple effect while fetching the data dynamically.
Methods
See here for more documentation on this.
| Method | Description |
|---|---|
$().button('toggle') |
Toggles push state. Gives the button the appearance that it has been activated. |
$().button('dispose') |
Destroys an element’s button. |