Badge

Badges are available as a web component using the skin-badge tag.

Attributes:

data-icon: Any valid skin-icon name (optional)
data-style: Alternate style (optional)

Valid styles include:

pill: Rounded

Examples

Default

Default with tag

Info light

2 minutes ago


                
                <div class="flex text-sm">

    <!-- Default -->
    <skin-badge
            class="tc-style-default">
        Default
    </skin-badge>

    <!-- Default -->
    <skin-badge
            class="tc-badge-pill tc-style-default"
            data-icon="tag">
        Default with tag
    </skin-badge>

    <!-- Info -->
    <skin-badge
            class="tc-style-info-light">
        Info light
    </skin-badge>

    <!-- Inverse -->
    <skin-badge
            class="tc-style-inverse"
            data-icon="clock"
            data-style="pill">
        2 minutes ago
    </skin-badge>

    <!-- Numeric -->
    <skin-badge
            class="tc-style-success-light"
            data-style="pill">
        5
    </skin-badge>

</div>