###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

#### Buttons

##### Default buttons

Quickly create a general button with several predefined button styles, each serving its own semantic purpose.

Class | Values
--- | ---
`class="btn btn-[value]"` | primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

##### Rounded buttons

Create rounded buttons by simply adding `.btn-rounded` class.

##### Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all colors on any button.

##### Sizes

Fancy larger or smaller buttons? Add `.btn-lg,.btn-sm` or `.btn-xs` for additional sizes.

##### Block buttons

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

##### Disabled State

Make buttons look inactive by adding the `disabled` boolean attribute to any <button> element. Use `.disabled` class in link buttons.

Disabled Link

##### Gradient buttons

dashgrin only

Replace the default modifier class with the `.btn-gradient-*` once to create gradient button.

Class | Values
--- | ---
`class="btn btn-gradient-[value]"` | primary / success / warning / danger / info / light / dark / pony / space / streaks / bunting / paradise / heaven / honey / warbler / dusk / citrine / royston / ashes / metal / sunset

##### Dropdown & Dropup Buttons

Any single button can be turned into a dropdown toggle with some markup changes. For dropup button, trigger dropdown menus by adding `.dropup` to the parent element.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

##### Buttons with Icons

dashgrin only

An icon can be used as a label for a button. Use `.btn-wth-icon` class to create button with icon. To change the position of icon to right, simply add `.icon-right` class.

##### Social buttons

Social buttons are same as icon buttons with social icons. Create many styles using icon button classes.

##### Icons buttons

dashgrin only

A button can have a single icon also. Create icon buttons using `.btn-icon` class For circle buttons add `.btn-icon-circle` class.

##### Icon Button Styles

dashgrin comes with different animation styles to create interest in regular style icon buttons.

###### Style 1

###### Style 2

###### Style 3

###### Style 4

###### Style 5

##### Button group

Wrap a series of buttons with `.btn` in `.btn-group`.

###### Button toolbar

###### Sizing

###### Nesting

Dropdown link Dropdown link
Dropdown link Dropdown link

##### Button group vertical

Make a set of buttons appear vertically stacked rather than horizontally.

###### Nesting

Dropdown link Dropdown link
Dropdown link Dropdown link