Badge - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

689

<span class="ts-badge">689</span>

Introduction

A badge displays text or numbers. Use Chip for content with close buttons, icons, or avatars.

Variations

Secondary

A badge that is less important.

16,226

<span class="ts-badge is-secondary">16,226</span>

Outlined

A badge with only an outline.

1,386

<span class="ts-badge is-outlined">1,386</span>

Negative

A badge that expresses danger or negative.

320

<span class="ts-badge is-negative">320</span>

Sizes

A badge can vary in size.

Small Default Large

<span class="ts-badge is-small">Small</span>
<span class="ts-badge">Default</span>
<span class="ts-badge is-large">Large</span>

Dense

A badge can be dense.

Newest

<span class="ts-badge is-dense">Newest</span>

Spaced

A badge can have spaces before or after.

Yami Odymel Admin

New Release Sweet Candy

The chair On-Sale is now available.

Yami Odymel <span class="ts-badge is-start-spaced">Admin</span>
<span class="ts-badge is-end-spaced">New Release</span> Sweet Candy
The chair <span class="ts-badge is-spaced">On-Sale</span> is now available.

Compositions

Table

A badge can be used in a table to highlight related information.

Machine	Status	Label
Frontend	Running	Taiwan Backup Enabled
Database	Running	United States Backup Enabled
File Storage	Running	United States

<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th>Machine</th>
                <th>Status</th>
                <th>Label</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Frontend</td>
                <td>Running</td>
                <td>
                    <span class="ts-badge">Taiwan</span>
                    <span class="ts-badge is-secondary">Backup Enabled</span>
                </td>
            </tr>
            <tr>
                <td>Database</td>
                <td>Running</td>
                <td>
                    <span class="ts-badge">United States</span>
                    <span class="ts-badge is-secondary">Backup Enabled</span>
                </td>
            </tr>
            <tr>
                <td>File Storage</td>
                <td>Running</td>
                <td>
                    <span class="ts-badge">United States</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Header

A badge can be used in a header to emphasize the latest news.

Interstellar On-Air

"Interstellar" is a 2014 sci-fi film directed and produced by Christopher Nolan. The movie follows a group of astronauts who travel through a wormhole in search of a new home for humanity.

— Wikipedia

<div class="ts-box">
    <div class="ts-content">
        <div class="ts-header">
            Interstellar
            <span class="ts-badge is-start-spaced">On-Air</span>
        </div>
        <p>"Interstellar" is a 2014 sci-fi film directed and produced by Christopher Nolan. The movie follows a group of astronauts who travel through a wormhole in search of a new home for humanity.</p>
        <div class="ts-text is-secondary">— Wikipedia</div>
    </div>
</div>

Looking for similar components?

Chip