Button
Default Buttons
<button type="button" class="btn bg-primary text-white">Primary</button>
<button type="button" class="btn bg-success text-white">Success</button>
<button type="button" class="btn bg-info text-white">Info</button>
<button type="button" class="btn bg-warning text-white">Warning</button>
<button type="button" class="btn bg-danger text-white">Danger</button>
<button type="button" class="btn bg-dark text-white">Dark</button>
<button type="button" class="btn bg-secondary text-white">Secondary</button>
<button type="button" class="btn bg-light text-slate-900 dark:text-slate-200">Light</button>
Rounded Button
<button type="button" class="btn bg-primary text-white rounded-full">Primary</button>
<button type="button" class="btn bg-success text-white rounded-full">Success</button>
<button type="button" class="btn bg-info text-white rounded-full">Info</button>
<button type="button" class="btn bg-warning text-white rounded-full">Warning</button>
<button type="button" class="btn bg-danger text-white rounded-full">Danger</button>
<button type="button" class="btn bg-dark text-white rounded-full">Dark</button>
<button type="button" class="btn bg-secondary text-white rounded-full">Secondary</button>
<button type="button" class="btn bg-light text-slate-900 dark:text-slate-200 rounded-full">Light</button>
Otline Buttons
<button type="button" class="btn border-primary text-primary hover:bg-primary hover:text-white">Primary</button>
<button type="button" class="btn border-success text-success hover:bg-success hover:text-white">Success</button>
<button type="button" class="btn border-info text-info hover:bg-info hover:text-white">Info</button>
<button type="button" class="btn border-warning text-warning hover:bg-warning hover:text-white">Warning</button>
<button type="button" class="btn border-danger text-danger hover:bg-danger hover:text-white">Danger</button>
<button type="button" class="btn border-dark text-slate-900 dark:text-slate-200 hover:bg-dark hover:text-white">Dark</button>
<button type="button" class="btn border-secondary text-secondary hover:bg-secondary hover:text-white">Secondary</button>
Outline Rounded Buttons
<button type="button" class="btn rounded-full border border-primary text-primary hover:bg-primary hover:text-white">Primary</button>
<button type="button" class="btn rounded-full border border-success text-success hover:bg-success hover:text-white">Success</button>
<button type="button" class="btn rounded-full border border-info text-info hover:bg-info hover:text-white">Info</button>
<button type="button" class="btn rounded-full border border-warning text-warning hover:bg-warning hover:text-white">Warning</button>
<button type="button" class="btn rounded-full border border-danger text-danger hover:bg-danger hover:text-white">Danger</button>
<button type="button" class="btn rounded-full border border-dark text-slate-900 dark:text-slate-200 hover:bg-dark hover:text-white">Dark</button>
<button type="button" class="btn rounded-full border border-secondary text-secondary hover:bg-secondary hover:text-white">Secondary</button>
Soft Buttons
<button type="button" class="btn bg-primary/25 text-primary hover:bg-primary hover:text-white">Primary</button>
<button type="button" class="btn bg-success/25 text-success hover:bg-success hover:text-white">Success</button>
<button type="button" class="btn bg-info/25 text-info hover:bg-info hover:text-white">Info</button>
<button type="button" class="btn bg-warning/25 text-warning hover:bg-warning hover:text-white">Warning</button>
<button type="button" class="btn bg-danger/25 text-danger hover:bg-danger hover:text-white">Danger</button>
<button type="button" class="btn bg-dark/25 text-white hover:bg-dark">Dark</button>
<button type="button" class="btn bg-secondary/25 text-secondary hover:bg-secondary hover:text-white">Secondary</button>
Soft Rounded Buttons
<button type="button" class="btn rounded-full bg-primary/25 text-primary hover:bg-primary hover:text-white">Primary</button>
<button type="button" class="btn rounded-full bg-success/25 text-success hover:bg-success hover:text-white">Success</button>
<button type="button" class="btn rounded-full bg-info/25 text-info hover:bg-info hover:text-white">Info</button>
<button type="button" class="btn rounded-full bg-warning/25 text-warning hover:bg-warning hover:text-white">Warning</button>
<button type="button" class="btn rounded-full bg-danger/25 text-danger hover:bg-danger hover:text-white">Danger</button>
<button type="button" class="btn rounded-full bg-dark/25 text-slate-900 dark:text-slate-200 hover:bg-dark hover:text-white">Dark</button>
<button type="button" class="btn rounded-full bg-secondary/25 text-secondary hover:bg-secondary hover:text-white">Secondary</button>
Buttons with Icon
<button type="button" class="btn bg-primary text-white"><i class="mgc_check_line text-base me-4"></i> Primary</button>
<button type="button" class="btn bg-success text-white"><i class="mgc_check_line text-base me-4"></i> Success</button>
<button type="button" class="btn bg-info text-white"><i class="mgc_alert_line text-base me-4"></i> Info</button>
<button type="button" class="btn bg-warning text-white"><i class="mgc_warning_line text-base me-4"></i> Warning</button>
<button type="button" class="btn bg-danger text-white"><i class="mgc_close_line text-base me-4"></i> Danger</button>
<button type="button" class="btn bg-dark text-white"><i class="mgc_check_line text-base me-4"></i> Dark</button>
Sizes
<button type="button" class="btn btn-sm bg-primary text-white">Small</button>
<button type="button" class="btn bg-primary text-white">Large</button>
<button type="button" class="btn btn-lg bg-primary text-white">Default</button>
Block Button
<button type="button" class="btn w-full bg-primary text-white">Default</button>
<button type="button" class="btn w-full border-primary text-primary">Default</button>
Disabled
<button type="button" class="btn bg-primary text-white" disabled>Disabled</button>
<button type="button" class="btn border-primary text-primary" disabled>Disabled</button>