Button
| Class name | Type | Description |
|---|---|---|
tc-btn | Component | Button |
tc-btn-sm | Utility | Small button |
tc-btn-row | Component | Child buttons are grouped together in a row |
tc-btn-col | Component | Child buttons are grouped together in a column |
When using the tc-btn class on anything other than a button or input, add a role="button" to convey the purpose. For example:
<div class="flex gap-2 mb-6">
<a href="#" title="Button" class="tc-btn tc-style-default" role="button">Button</a>
<div class="tc-btn tc-style-default" role="button">Button</div>
<button class="tc-btn tc-style-default">Button</button>
<input type="submit" class="tc-btn tc-style-default" value="Button">
</div>
<div class="flex gap-2">
<a href="#" title="Button" class="tc-btn tc-btn-sm tc-style-default" role="button">Button</a>
<div class="tc-btn tc-btn-sm tc-style-default" role="button">Button</div>
<button class="tc-btn tc-btn-sm tc-style-default">Button</button>
<input type="submit" class="tc-btn tc-btn-sm tc-style-default" value="Button">
</div>
Examples
<div class="space-y-2">
<button type="button" class="tc-btn tc-style-default">tc-style-default</button>
<button type="button" class="tc-btn tc-style-default-o">tc-style-default-o</button>
<button type="button" class="tc-btn tc-style-content">tc-style-content</button>
<button type="button" class="tc-btn tc-style-inverse">tc-style-inverse</button>
<button type="button" class="tc-btn tc-style-primary">tc-style-primary</button>
<button type="button" class="tc-btn tc-style-primary-o">tc-style-primary-o</button>
<button type="button" class="tc-btn tc-style-secondary">tc-style-secondary</button>
<button type="button" class="tc-btn tc-style-secondary-o">tc-style-secondary-o</button>
<button type="button" class="tc-btn tc-style-info">tc-style-info</button>
<button type="button" class="tc-btn tc-style-info-o">tc-style-info-o</button>
<button type="button" class="tc-btn tc-style-info-light">tc-style-info-light</button>
<button type="button" class="tc-btn tc-style-warning">tc-style-warning</button>
<button type="button" class="tc-btn tc-style-warning-o">tc-style-warning-o</button>
<button type="button" class="tc-btn tc-style-warning-light">tc-style-warning-light</button>
<button type="button" class="tc-btn tc-style-error">tc-style-error</button>
<button type="button" class="tc-btn tc-style-error-o">tc-style-error-o</button>
<button type="button" class="tc-btn tc-style-error-light">tc-style-error-light</button>
<button type="button" class="tc-btn tc-style-success">tc-style-success</button>
<button type="button" class="tc-btn tc-style-success-o">tc-style-success-o</button>
<button type="button" class="tc-btn tc-style-success-light">tc-style-success-light</button>
</div>
Group as row and column
<div class="tc-btn-row mb-6">
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">First</button>
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">Second</button>
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">Third</button>
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">Fourth</button>
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">Fifth</button>
</div>
<div class="tc-btn-col">
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">First</button>
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">Second</button>
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">Third</button>
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">Fourth</button>
<button type="button" class="tc-btn tu-border-default hover:tu-bg-default">Fifth</button>
</div>
Badge inside a button
<button type="button" class="tc-btn tc-style-default">
Notifications <span class="ml-2 rounded-full text-xs tc-badge tc-style-primary">10</span>
</button>