Button
The Button component lets you add standard HTML buttons to your
project. It allow users to take actions, and make choices, with a single tap.
Default Buttons
This is the default html tag button without any style.
<button>DEFAULT</button>
Standard Button
Contained buttons are high-emphasis, distinguished by their use
of elevation and fill. They contain actions that are primary to your app. The 'btn' class is
used for basic styling of button and classes 'btn-primary', 'btn-succes', 'btn-danger' and
'btn-warning' for colors.
<button class="btn btn-primary">PRIMARY</button>
<button class="btn btn-success">SUCCESS</button>
<button class="btn btn-danger">DANGER</button>
<button class="btn btn-warning">WARNING</button>
Outlined Button
Outlined buttons are medium-emphasis buttons. They contain
actions that are important, but aren't the primary action in an app. The 'btn' and
'btn-outlined' class is used for basic styling of button and classes 'btn-outlined-primary',
'btn-outlined-succes', 'btn-outlined-danger' and 'btn-outlined-warning' for colors.
<button class="btn btn-outlined btn-outlined-primary">PRIMARY</button>
<button class="btn btn-outlined btn-outlined-success">SUCCESS</button>
<button class="btn btn-outlined btn-outlined-danger">DANGER</button>
<button class="btn btn-outlined btn-outlined-warning">WARNING</button>
Icon Button
Icon buttons allow users to take actions, and make choices, with
a single tap. Simply these are buttons with icons such as home notifications. The 'btn',
'btn-icon' , 'btn-menu' and 'btn-trash' class is used for basic styling and introducing icons to
button.
<button class="btn btn-icon"><i class="fa fa-home"></i></button>
<button class="btn btn-icon"><i class="fa fa-share-square-o fa-2x"></i></button>
<button class="btn btn-menu"><i class="fa fa-folder"></i> Folder</button>
<button class="btn btn-trash"><i class="fa fa-trash"></i> Trash</button>
Link Button
Link Buttons create a hyperlink-style button on the Web page. The
Link Button control has the same appearance as a HyperLink control, but has the same
functionality as a Button control. Here we have use the class 'btn btn-link' for basic button
styling.
<button class="btn btn-link"><a href = "#"></a></button>
Floating Action Button
A floating action button (FAB) performs the primary, or most
common, action on a screen. It appears in front of all screen content, typically as a circular
shape with an icon in its center. Here we have used classes 'btn btn-float' for basic styling.
<button class="btn btn-float"><i class = "fa fa-plus"></i></button>