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.

The .btn class has sharp edges. You can change it using one of the shape classes. (e.g. .rounded)

To use a filled button, use one of the background color classes. (e.g. .bg-blue)

For border buttons, add a border class to the button. (e.g. .bd-blue)

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.

The disabled buttons do not require a special class for styling. The attribute disabled can be used to display a disabled 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.