Button
| ClassName | Type | Description |
|---|---|---|
btn
| component | Button Component |
btn-primary
| theme | Applies the primary colors |
btn-accent
| theme | Applies the accent colors |
btn-success
| theme | Applies the success colors |
btn-error
| theme | Applies the error colors |
btn-warning
| theme | Applies the warning colors |
btn-info
| theme | Applies the info colors |
btn-outline
| modifier | Makes it a button with an outline and transparent background |
btn-text
| modifier | Makes it a button that is just text |
Default Button
<button class="btn">Button</button>
<button class="btn-primary btn">Button Primary</button>
<button class="btn-accent btn">Button Accent</button>
<button class="btn-success btn">Button Success</button>
<button class="btn-error btn">Button Error</button>
<button class="btn-warning btn">Button Warning</button>
<button class="btn-info btn">Button Info</button>
Outline Button
<button class="btn-outline btn">Outline Button</button>
<button class="btn-outline btn-primary btn">Outline Button Primary</button>
<button class="btn-outline btn-accent btn">Outline Button Accent</button>
<button class="btn-outline btn-success btn">Outline Button Success</button>
<button class="btn-outline btn-error btn">Outline Button Error</button>
<button class="btn-outline btn-warning btn">Outline Button Warning</button>
<button class="btn-outline btn-info btn">Outline Button Info</button>
Text Button
<button class="btn btn-text">Text Button</button>
<button class="btn btn-primary btn-text">Text Button Primary</button>
<button class="btn btn-accent btn-text">Text Button Accent</button>
<button class="btn btn-success btn-text">Text Button Success</button>
<button class="btn btn-error btn-text">Text Button Error</button>
<button class="btn btn-warning btn-text">Text Button Warning</button>
<button class="btn btn-info btn-text">Text Button Info</button>