UI Kits
Button
Notification
0
No new notification
4
Notification
4
1
new registration
1
new orders
2
customers messages
view all
Emily Hart
Emily Hart
emily_hart@email.com
Profile
Logout
Flat Admin V.2
Dashboard
UI Kits
Grid
Theming
Buttons
Cards
Lists
Modals
Alerts & Toasts
Panels
Loaders
Tabs & Steps
Other
Table
Table
Datatable
Form
Form UI Kits
Components
Pricing Table
Chart.JS
Page Example
Login
Landing Page
Icons
Glyphicons
Font Awesomes
License
Button
A button elements for user action.
Button
Default
Primary
Success
Info
Warning
Danger
Link
Button
Extra Small .btn-xs
Small .btn-sm
Default
Big .btn-lg
×
Button Example
<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button>
Button Group
Left
Middle
Right
Sizing
(
.btn-group-lg
,
.btn-group-sm
,
.btn-group-xs
)
Left
Middle
Right
Left
Middle
Right
Left
Middle
Right
Left
Middle
Right
×
Button Group Example
<div class="btn-group" role="group" aria-label="Default button group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
Button Dropdown
Default
Action
Another action
Something else here
Separated link
Primary
Action
Another action
Something else here
Separated link
Success
Action
Another action
Something else here
Separated link
Info
Action
Another action
Something else here
Separated link
Warning
Action
Another action
Something else here
Separated link
Danger
Action
Another action
Something else here
Separated link
Split Button
Default
Toggle Dropdown
Action
Another action
Something else here
Separated link
Primary
Toggle Dropdown
Action
Another action
Something else here
Separated link
Success
Toggle Dropdown
Action
Another action
Something else here
Separated link
Info
Toggle Dropdown
Action
Another action
Something else here
Separated link
Warning
Toggle Dropdown
Action
Another action
Something else here
Separated link
Danger
Toggle Dropdown
Action
Another action
Something else here
Separated link
Sizing
(
.btn-lg
,
.btn-sm
,
.btn-xs
)
Large button
Action
Another action
Something else here
Separated link
Small button
Action
Another action
Something else here
Separated link
Extra small button
Action
Another action
Something else here
Separated link
×
Button Dropdown Example
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>