Button
Classes Information
| ClassName | Description |
|---|---|
| btn | Base Class |
| btn-loading | Add button loading spinner |
| btn-rounded | Set button full rounded |
| btn-circle | Set Button Circle |
| btn-block | Set button full width |
| btn-no-animation | Remove animaton on press |
| btn-primary | Set button primary color |
| btn-secondary | Set button secondary color |
| btn-success | Set button success color |
| btn-warning | Set button warning color |
| btn-error | Set button error color |
| btn-ghost | Transparent background with no border and hover effect |
| btn-outline-primary | Transparent background with border primary and hover effect |
| btn-outline-secondary | Transparent background with border secondary and hover effect |
| btn-outline-success | Transparent background with border success and hover effect |
| btn-outline-warning | Transparent background with border warning and hover effect |
| btn-outline-error | Transparent background with border error and hover effect |
| btn-solid-primary | Set low primary background and high contrast text color |
| btn-solid-secondary | Set low secondary background and high contrast text color |
| btn-solid-success | Set low success background and high contrast text color |
| btn-solid-warning | Set low warning background and high contrast text color |
| btn-solid-error | Set low error background and high contrast text color |
| btn-2xs | Set button 2extra small size |
| btn-xs | Set button extra small size |
| btn-sm | Set button small size |
| btn-md | Set button medium size |
| btn-lg | Set button large size |
| btn-xl | Set button extra large size |
Basic Usage
Example Code
html
<button class="btn">Basic</button>Rounded
Example Code
html
<button class="btn btn-rounded btn-primary">Basic</button>Icon
Example Code
html
<button class="btn btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>Loading
Example Code
html
<button class="btn btn-loading">Basic</button>No Animation
Example Code
html
<button class="btn btn-primary btn-no-animation">No Animation</button>Block
Example Code
html
<button class="btn btn-primary btn-block">Block</button>Disabled
Example Code
html
<button class="btn" disabled>Disabled</button>Colors
Example Code
html
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-ghost">Ghost</button>Outline
Example Code
html
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-error">Error</button>solid
Example Code
html
<button class="btn btn-solid-primary">Primary</button>
<button class="btn btn-solid-secondary">Secondary</button>
<button class="btn btn-solid-success">Success</button>
<button class="btn btn-solid-warning">Warning</button>
<button class="btn btn-solid-error">Error</button>Sizes
Example Code
html
<button class="btn btn-primary btn-xl">Extra Large</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-md">Base</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-xs">Extra Small</button>
<button class="btn btn-primary btn-2xs">Extra Small</button>