Buttons
Standard Buttons Types
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Button Colors
<button type="button" class="btn btn-theme">Theme</button>
<button type="button" class="btn btn-accent">Accent</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
Button Outlined
<button type="button" class="btn btn-outline-theme">Theme</button>
<button type="button" class="btn btn-outline-accent">Accent</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Button Light Colors
<button type="button" class="btn btn-light-color btn-theme">Theme</button>
<button type="button" class="btn btn-light-color btn-accent">Accent</button>
<button type="button" class="btn btn-light-color btn-primary">Primary</button>
<button type="button" class="btn btn-light-color btn-secondary">Secondary</button>
<button type="button" class="btn btn-light-color btn-success">Success</button>
<button type="button" class="btn btn-light-color btn-danger">Danger</button>
<button type="button" class="btn btn-light-color btn-warning">Warning</button>
<button type="button" class="btn btn-light-color btn-info">Info</button>
<button type="button" class="btn btn-light-color btn-light">Light</button>
<button type="button" class="btn btn-light-color btn-dark">Dark</button>
Button Outlined Dashed
<button type="button" class="btn btn-outline-theme btn-outline-dashed">Theme</button>
<button type="button" class="btn btn-outline-accent btn-outline-dashed">Accent</button>
<button type="button" class="btn btn-outline-primary btn-outline-dashed">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-outline-dashed">Secondary</button>
<button type="button" class="btn btn-outline-success btn-outline-dashed">Success</button>
<button type="button" class="btn btn-outline-danger btn-outline-dashed">Danger</button>
<button type="button" class="btn btn-outline-warning btn-outline-dashed">Warning</button>
<button type="button" class="btn btn-outline-info btn-outline-dashed">Info</button>
<button type="button" class="btn btn-outline-light btn-outline-dashed">Light</button>
<button type="button" class="btn btn-outline-dark btn-outline-dashed">Dark</button>
Buttons Types Size
<a class="btn btn-primary btn-lg" href="#" role="button">Link</a>
<button class="btn btn-primary btn-lg" type="submit">Button</button>
<input class="btn btn-primary btn-lg" type="button" value="Input">
<input class="btn btn-primary btn-lg" type="submit" value="Submit">
<input class="btn btn-primary btn-lg" type="reset" value="Reset">
<p></p>
<a class="btn btn-primary btn-sm" href="#" role="button">Link</a>
<button class="btn btn-primary btn-sm" type="submit">Button</button>
<input class="btn btn-primary btn-sm" type="button" value="Input">
<input class="btn btn-primary btn-sm" type="submit" value="Submit">
<input class="btn btn-primary btn-sm" type="reset" value="Reset">
Toggle State
<button type="button" class="btn btn-theme" data-bs-toggle="button">Theme</button>
<button type="button" class="btn btn-accent active" data-bs-toggle="button" aria-pressed="true">Accent</button>
<button type="button" class="btn btn-primary" data-bs-toggle="button">Primary</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="button">Secondary</button>
<button type="button" class="btn btn-success" data-bs-toggle="button">Success</button>
<button type="button" class="btn btn-danger" data-bs-toggle="button">Danger</button>
<button type="button" class="btn btn-warning" data-bs-toggle="button">Warning</button>
<button type="button" class="btn btn-info" data-bs-toggle="button">Info</button>
<button type="button" class="btn btn-light active" data-bs-toggle="button" aria-pressed="true">Light</button>
<button type="button" class="btn btn-dark" data-bs-toggle="button">Dark</button>