Buttons
Theme Buttons
Predefined button styles, each serving its own semantic purpose.
<div class="btn-list">
<button class="btn ripple btn-main-primary">Primary</button>
<button class="btn ripple btn-secondary">Secondary</button>
<button class="btn ripple btn-light">Light</button>
<button class="btn ripple btn-dark">Dark</button>
</div>Bootstrap Buttons
Predefined button styles, each serving its own semantic purpose.
<div class="btn-list">
<button class="btn ripple btn-primary">Primary</button>
<button class="btn ripple btn-secondary">Secondary</button>
<button class="btn ripple btn-success">Success</button>
<button class="btn ripple btn-warning">Warning</button>
<button class="btn ripple btn-danger">Danger</button>
<button class="btn ripple btn-info">Info</button>
<button class="btn ripple btn-light">Light</button>
<button class="btn ripple btn-dark">Dark</button>
</div>Bootstrap Disabled Buttons
Predefined button styles, each serving its own semantic purpose.
<div class="btn-list">
<button class="btn ripple btn-primary disabled">Primary</button>
<button class="btn ripple btn-secondary disabled">Secondary</button>
<button class="btn ripple btn-success disabled">Success</button>
<button class="btn ripple btn-warning disabled">Warning</button>
<button class="btn ripple btn-danger disabled">Danger</button>
<button class="btn ripple btn-infodisabled">Info</button>
<button class="btn ripple btn-light disabled">Light</button>
<button class="btn ripple btn-dark disabled">Dark</button>
</div>Outline Buttons
Predefined button styles, each serving its own semantic purpose.
<button class="btn ripple btn-outline-primary">Primary</button>
<button class="btn ripple btn-outline-secondary">Secondary</button>
<button class="btn ripple btn-outline-light">Light</button>
<button class="btn ripple btn-outline-dark">Dark</button>
<button class="btn ripple btn-outline-success">Success</button>
<button class="btn ripple btn-outline-danger">Danger</button>
<button class="btn ripple btn-outline-info">Info</button>
<button class="btn ripple btn-outline-warning">warning</button>
</div>Rounded Buttons
Predefined button styles, each serving its own semantic purpose.
<div class="btn-list">
<button class="btn ripple btn-primary btn-rounded">Primary</button>
<button class="btn ripple btn-secondary btn-rounded">Secondary</button>
<button class="btn ripple btn-success btn-rounded">Success</button>
<button class="btn ripple btn-danger btn-rounded">Danger</button>
<button class="btn ripple btn-info btn-rounded">Info</button>
<button class="btn ripple btn-warning btn-rounded">Warning</button>
<button class="btn ripple btn-light btn-rounded">Light</button>
<button class="btn ripple btn-dark btn-rounded">Dark</button>
</div>Rounded Outline Buttons
Predefined button styles, each serving its own semantic purpose.
<div class="btn-list">
<button class="btn ripple btn-outline-primary btn-rounded">Primary</button>
<button class="btn ripple btn-outline-secondary btn-rounded">Secondary</button>
<button class="btn ripple btn-outline-success btn-rounded">Success</button>
<button class="btn ripple btn-outline-danger btn-rounded">Danger</button>
<button class="btn ripple btn-outline-info btn-rounded">Info</button>
<button class="btn ripple btn-outline-warning btn-rounded">Warning</button>
<button class="btn ripple btn-outline-light btn-rounded">Light</button>
<button class="btn ripple btn-outline-dark btn-rounded">Dark</button>
</div>Button Sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm and .btn-blockfor additional sizes.
<div class="btn-list">
<button type="button" class="btn ripple btn-primary btn-lg">Large button</button>
<button type="button" class="btn ripple btn-secondary btn-lg">Large button</button>
<button type="button" class="btn ripple btn-primary btn-sm">Small button</button>
<button type="button" class="btn ripple btn-secondary btn-sm">Small button</button>
<button type="button" class="btn ripple btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn ripple btn-secondary btn-lg btn-block">Block level button</button>
</div>Button with Icons
A basic button with added icons.
<div class="btn-list">
<button class="btn ripple btn-primary btn-with-icon"><i class="fe fe-airplay"></i> Folder</button>
<button class="btn ripple btn-secondary btn-with-icon"><i class="fe fe-briefcase"></i> Mail</button>
<button class="btn ripple btn-success btn-with-icon"><i class="fe fe-folder"></i> Edit</button>
</div>Button Groups
Group a series of buttons together on a single line with the button group.
<div class="btn-list">
<div aria-label="Basic example" class="btn btn-group" role="group">
<button class="btn ripple btn-secondary pd-x-25 active" type="button">Left</button>
<button class="btn ripple btn-secondary pd-x-25" type="button">Center</button>
<button class="btn ripple btn-secondary pd-x-25" type="button">Right</button>
</div>
<div aria-label="Basic example" class="btn btn-group" role="group">
<button class="btn ripple btn-secondary btn-icon active" type="button"><i class="typcn typcn-media-play-outline"></i></button>
<button class="btn ripple btn-secondary btn-icon" type="button"><i class="typcn typcn-media-pause-outline"></i></button>
<button class="btn ripple btn-secondary btn-icon" type="button"><i class="typcn typcn-media-stop-outline"></i></button>
</div>
<div aria-label="Basic example" class="btn btn-group" role="group">
<button class="btn ripple btn-primary btn-icon active" type="button"><i class="typcn typcn-media-play-outline"></i></button>
<button class="btn ripple btn-primary btn-icon" type="button"><i class="typcn typcn-media-pause-outline"></i></button>
<button class="btn ripple btn-primary btn-icon" type="button"><i class="typcn typcn-media-stop-outline"></i></button>
</div>
</div>Dropdown Buttons
A button variant for using only icons.
<div class="btn-list">
<button class="btn ripple btn-primary" data-bs-toggle="dropdown">Dropdown <i class="icon ion-ios-arrow-down tx-11 mg-l-3"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="">Profile</a>
<a class="dropdown-item" href="">Activity Logs</a>
<a class="dropdown-item" href="">Account Settings</a>
<a class="dropdown-item" href="">Logout</a>
</div>
<button class="btn ripple btn-secondary" data-bs-toggle="dropdown">Dropdown <i class="icon ion-ios-arrow-down tx-11 mg-l-3"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="">Profile</a>
<a class="dropdown-item" href="">Activity Logs</a>
<a class="dropdown-item" href="">Account Settings</a>
<a class="dropdown-item" href="">Logout</a>
</div>
</div>Icon Buttons
A button variant for using only icons.
<div class="btn-icon-list">
<button class="btn ripple btn-primary btn-icon"><i class="fe fe-airplay"></i></button>
<button class="btn ripple btn-secondary btn-icon"><i class="fe fe-briefcase"></i></button>
<button class="btn ripple btn-success btn-icon"><i class="fe fe-folder"></i></button>
<button class="btn ripple btn-info btn-icon"><i class="fe fe-link"></i></button>
</div>Project Status
Project Planning
100% Completed
Project Desiging
100% Completed
Project Development
76% Progress
Project Testing
Waiting