Badge
| Class name | Type | Description |
|---|---|---|
tc-badge | Component | Badge |
tc-badge-pill | Utility | Pill shape badge |
Examples
For an example of a badge inside a button, see the button component.
tc-badge
tc-style-default tc-style-default-o tc-style-content tc-style-inverse tc-style-primary tc-style-primary-o tc-style-secondary tc-style-secondary-o tc-style-info tc-style-info-o tc-style-info-light tc-style-warning tc-style-warning-o tc-style-warning-light tc-style-error tc-style-error-o tc-style-error-light tc-style-success tc-style-success-o tc-style-success-light
<div class="text-sm space-y-2">
<span class="tc-badge tc-style-default">tc-style-default</span>
<span class="tc-badge tc-style-default-o">tc-style-default-o</span>
<span class="tc-badge tc-style-content">tc-style-content</span>
<span class="tc-badge tc-style-inverse">tc-style-inverse</span>
<span class="tc-badge tc-style-primary">tc-style-primary</span>
<span class="tc-badge tc-style-primary-o">tc-style-primary-o</span>
<span class="tc-badge tc-style-secondary">tc-style-secondary</span>
<span class="tc-badge tc-style-secondary-o">tc-style-secondary-o</span>
<span class="tc-badge tc-style-info">tc-style-info</span>
<span class="tc-badge tc-style-info-o">tc-style-info-o</span>
<span class="tc-badge tc-style-info-light">tc-style-info-light</span>
<span class="tc-badge tc-style-warning">tc-style-warning</span>
<span class="tc-badge tc-style-warning-o">tc-style-warning-o</span>
<span class="tc-badge tc-style-warning-light">tc-style-warning-light</span>
<span class="tc-badge tc-style-error">tc-style-error</span>
<span class="tc-badge tc-style-error-o">tc-style-error-o</span>
<span class="tc-badge tc-style-error-light">tc-style-error-light</span>
<span class="tc-badge tc-style-success">tc-style-success</span>
<span class="tc-badge tc-style-success-o">tc-style-success-o</span>
<span class="tc-badge tc-style-success-light">tc-style-success-light</span>
</div>
tc-badge-pill
tc-style-default tc-style-default-o tc-style-content tc-style-inverse tc-style-primary tc-style-primary-o tc-style-secondary tc-style-secondary-o tc-style-info tc-style-info-o tc-style-info-light tc-style-warning tc-style-warning-o tc-style-warning-light tc-style-error tc-style-error-o tc-style-error-light tc-style-success tc-style-success-o tc-style-success-light
<div class="text-sm space-y-2">
<span class="tc-badge tc-badge-pill tc-style-default">tc-style-default</span>
<span class="tc-badge tc-badge-pill tc-style-default-o">tc-style-default-o</span>
<span class="tc-badge tc-badge-pill tc-style-content">tc-style-content</span>
<span class="tc-badge tc-badge-pill tc-style-inverse">tc-style-inverse</span>
<span class="tc-badge tc-badge-pill tc-style-primary">tc-style-primary</span>
<span class="tc-badge tc-badge-pill tc-style-primary-o">tc-style-primary-o</span>
<span class="tc-badge tc-badge-pill tc-style-secondary">tc-style-secondary</span>
<span class="tc-badge tc-badge-pill tc-style-secondary-o">tc-style-secondary-o</span>
<span class="tc-badge tc-badge-pill tc-style-info">tc-style-info</span>
<span class="tc-badge tc-badge-pill tc-style-info-o">tc-style-info-o</span>
<span class="tc-badge tc-badge-pill tc-style-info-light">tc-style-info-light</span>
<span class="tc-badge tc-badge-pill tc-style-warning">tc-style-warning</span>
<span class="tc-badge tc-badge-pill tc-style-warning-o">tc-style-warning-o</span>
<span class="tc-badge tc-badge-pill tc-style-warning-light">tc-style-warning-light</span>
<span class="tc-badge tc-badge-pill tc-style-error">tc-style-error</span>
<span class="tc-badge tc-badge-pill tc-style-error-o">tc-style-error-o</span>
<span class="tc-badge tc-badge-pill tc-style-error-light">tc-style-error-light</span>
<span class="tc-badge tc-badge-pill tc-style-success">tc-style-success</span>
<span class="tc-badge tc-badge-pill tc-style-success-o">tc-style-success-o</span>
<span class="tc-badge tc-badge-pill tc-style-success-light">tc-style-success-light</span>
</div>