Button
Buttons communicate actions that user can take. They can be placed throughout the UI like in Cards, Forms, Modals, ToolBars. Use the class .btn to start styling a button.
Button Shape
The .btn class has sharp edges. You can change it using one of the shape classes. (e.g. .rounded)
<button class="btn">Sharp Edge</button>
<button class="btn rounded-slight">Slight Round</button>
<button class="btn rounded">Rounded Edges</button>
<button class="btn capsule">Capsule</button>
Filled Button
To use a filled button, use one of the background color classes. (e.g. .bg-blue)
<button class="btn bg-blue">Blue</button>
<button class="btn bg-green">Green</button>
<button class="btn bg-red">Red</button>
<button class="btn bg-purple">Purple</button>
Border Button
For border buttons, add a border class to the button. (e.g. .bd-blue)
<button class="btn bd-blue">Blue</button>
<button class="btn bd-green">Green</button>
<button class="btn bd-red">Red</button>
<button class="btn bd-purple">Purple</button>
Icon Button
Icon buttons are useful when space is limited. Also, if the icon represents the action well, users can sometimes recognize them quicker than reading text. Icon buttons can be used standalone or along with some text. The < button > tag can be replaced with < a > tag for using it semantically for links without changing the styles.
<button class="btn icon bg-blue rounded">
<i class="far fa-envelope icon"></i>
<span>Mail</span>
</button>
<a href="#" class="btn icon bg-blue rounded">
<i class="fas fa-home"></i>
</a>
<button class="btn icon bg-blue rounded">
<i class="fas fa-bars"></i>
</button>
Disabled Button
The disabled buttons do not require a special class for styling. The attribute disabled can be used to display a disabled button.
<button class="btn" disabled>Disabled</button>
Floating Button
Floating Action Buttons are used to show the most commonly used action a user can take on the page. (e.g. Goto Top or Start New Chat). Add the class .float to get a floated button on the bottom right of the screen.
<button class="btn bg-blue icon float capsule">
<i class="far fa-envelope icon"></i>
</button>