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>
Web component
Badges are available to be used as a web component. Any tc-badge-* utility class can be applied.
Attributes:
data-icon: Any valid skin-icon name (optional)
<div class="flex text-sm">
<!-- Default -->
<skin-badge class="tc-style-default">
Default badge
</skin-badge>
<!-- Info -->
<skin-badge class="tc-style-info-light">
2 minutes ago
</skin-badge>
<!-- Default -->
<skin-badge class="tc-badge-pill tc-style-default" data-icon="tag">
Default badge
</skin-badge>
<!-- Info -->
<skin-badge class="tc-badge-pill tc-style-info-light" data-icon="clock">
2 minutes ago
</skin-badge>
</div>