1. SmartAdmin
  2. UI Components
  3. Buttons

Buttons Use custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

Button Colors

SmartAdmin WebApp includes nine predefined button styles, each serving its own semantic purpose.
Default
Rounded
Unique style

Block Buttons

Create block level buttons—those that span the full width of a parent—by adding .btn-block

Option Sizes

Alter button sizes by using the classes .btn-lg, .btn-sm, .btn-xs
Largest size
Default size
Small size
Smallest size

Button with Icons

We use the icon tags to insert icons into buttons

Icons example

Convert button to an icon button by adding the class .btn-icon
Various sizes
Rounded
Hover dot effect

Button Outlines

Replace the default modifier classes with.btn-outline-*
Outline
Rounded outline
Unique style

Block Outlines

Block buttons inherits outline button properties .btn-outline-*

Option Sizes

Alter button sizes by using the classes .btn-lg, .btn-sm, .btn-xs
Largest size

Default size

Small size

Smallest size

Button with Icons

We use the icon tags to insert icons into buttons

Icon Outlined

Convert button to an icon button by adding the class .btn-icon
Various sizes

Rounded outline

Hover dot effect