# 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 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

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode