Chip - Tocas UI

Input

A chip can be used as a checkbox or radio button. Checked chip will have a checkmark icon.

Workout Game Reading

<label class="ts-chip">
    <input type="checkbox" checked />
    Workout
</label>
<label class="ts-chip">
    <input type="checkbox" />
    Game
</label>
<label class="ts-chip">
    <input type="checkbox" />
    Reading
</label>

Disabled

A disabled chip cannot be interacted with. For hyperlinks, use the .is-disabled class.

Checkbox Chip

Link Chip

<label class="ts-chip">
    <input type="checkbox" disabled>
    <div class="content">Checkbox Chip</div>
</label>
<button class="ts-chip" disabled>
    Button Chip
</button>
<a class="ts-chip is-disabled">
    Link Chip
</a>

Close

A chip can have a close button.

Sorae & Co.

Dynamic Thinking Co.

<div class="ts-chip is-circular">
    Sorae & Co.
    <button class="ts-close"></button>
</div>
<div class="ts-chip is-circular is-outlined">
    Dynamic Thinking Co.
    <button class="ts-close is-secondary"></button>
</div>

Image

A chip can have an image.

Yami Odymel

<div class="ts-chip is-circular">
    <div class="ts-image is-circular">
        <img src="user.png">
    </div>
    Yami Odymel
</div>

Outlined

A chip can be outlined.

Taiwan

United States

Hong Kong

<div class="ts-chip is-outlined">
    <span class="ts-flag is-taiwan-flag"></span>
    Taiwan
</div>
<div class="ts-chip is-outlined">
    <span class="ts-flag is-america-flag"></span>
    United States
</div>
<div class="ts-chip is-outlined">
    <span class="ts-flag is-hong-kong-flag"></span>
    Hong Kong
</div>

Circular

A chip can be circular.

Video

Music

<div class="ts-chip is-circular">Video</div>
<div class="ts-chip is-circular">Music</div>

Fluid

A chip can take the full width of its container.

Small

Medium

Large

<div class="ts-grid is-3-columns">
    <div class="column">
        <label class="ts-chip is-fluid is-outlined">
            <input type="checkbox" checked>
            Small
        </label>
    </div>
    <div class="column">
        <label class="ts-chip is-fluid is-outlined">
            <input type="checkbox">
            Medium
        </label>
    </div>
    <div class="column">
        <label class="ts-chip is-fluid is-outlined">
            <input type="checkbox">
            Large
        </label>
    </div>
</div>

Side Icon

A chip can have an icon on the side.

Video

Biking

<div class="ts-chip is-start-icon">
    <span class="ts-icon is-video-icon"></span>
    Video
</div>
<div class="ts-chip is-end-icon">
    Biking
    <span class="ts-icon is-person-biking-icon"></span>
</div>

Sizes

A chip can vary in size.

Small Chip

Default Chip

Large Chip

<div class="ts-chip is-small">
    <span class="ts-icon is-heart-icon"></span>
    Small Chip
</div>
<div class="ts-chip">
    <span class="ts-icon is-heart-icon"></span>
    Default Chip
</div>
<div class="ts-chip is-large">
    <span class="ts-icon is-heart-icon"></span>
    Large Chip
</div>

Dense

A chip can be dense.

Caris Events

<div class="ts-chip is-dense is-outlined">
    Caris Events
</div>

Spaced

A chip can have spaces before or after.

Post author is A placeholder image

Mac Taylor

Sciuridae Li is the admin.

It's

Sean Wei saying.

Post author is <span class="ts-chip is-start-spaced">
    <img src="user.png">
    Mac Taylor
</span>
<span class="ts-chip is-end-spaced">
    <img src="user.png">
    Sciuridae Li
</span> is the admin.
It's <span class="ts-chip is-spaced">
    <img src="user.png">
    Sean Wei
</span> saying.

Extra Actions

Chips can be used to display extra actions below the title.

Welcome Home

Temperature 32°C, Humidity 48%

<div class="ts-header is-center-aligned is-large">
    Welcome Home
</div>
<div class="ts-text is-center-aligned is-description">
    Temperature 32°C, Humidity 48%
</div>
<div class="ts-wrap is-center-aligned is-compact has-top-spaced">
    <button class="ts-chip is-outlined">
        <span class="ts-icon is-sun-icon"></span>
        Open Lights
    </button>
    <button class="ts-chip is-outlined">
        <span class="ts-icon is-stopwatch-icon"></span>
        Set Alarm
    </button>
</div>

Actions

Chips can be used as additional options in a card.

Sushi PLUS

Japanese Restaurant $$ 4.5

<div class="ts-box" style="max-width: 360px">
    <img class="ts-image" src="image.png">
    <div class="ts-content">
        <div class="ts-header">Sushi PLUS</div>
        <div class="ts-meta is-secondary is-small">
            <span class="item">Japanese Restaurant</span>
            <span class="item">$$</span>
            <span class="item">4.5 <span class="ts-icon is-star-icon"></span></span>
        </div>
        <div class="ts-divider is-section"></div>
        <div class="ts-wrap is-compact">
            <button class="ts-chip is-circular">
                <span class="ts-icon is-utensils-icon"></span>
                Preserve Table
            </button>
            <button class="ts-chip is-circular">
                <span class="ts-icon is-motorcycle-icon"></span>
                Pick Up
            </button>
        </div>
    </div>
</div>

Suggestions

A chip can be used as suggestions in a reply message.

<div class="ts-grid">
    <div class="column">
        <div class="ts-image">
            <img src="user.png" width="48">
        </div>
    </div>
    <div class="column is-fluid">
        <div class="ts-input">
            <textarea placeholder="Reply the mail..."></textarea>
        </div>
        <div class="ts-grid has-top-spaced">
            <div class="column is-fluid">
                <div class="ts-wrap is-compact">
                    <button class="ts-chip is-circular">
                        No problem!
                    </button>
                    <button class="ts-chip is-circular">
                        Sorry, I was busy that day.
                    </button>
                </div>
            </div>
            <div class="column">
                <button class="ts-button">Submit</button>
            </div>
        </div>
    </div>
</div>