Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
Types
A chip can be used as a checkbox or radio button. Checked chip will have a checkmark icon.
<label class="ts-chip is-input">
<input type="checkbox" checked>
<div class="content">Workout</div>
</label>
<label class="ts-chip is-input">
<input type="checkbox">
<div class="content">Game</div>
</label>
<label class="ts-chip is-input">
<input type="checkbox">
<div class="content">Reading</div>
</label>A chip can be used as a toggle switch.
<label class="ts-chip is-toggle is-circular">
<input type="checkbox">
<div class="content">Hottest</div>
</label>
<label class="ts-chip is-toggle is-circular">
<input type="checkbox" checked>
<div class="content">Unvisited</div>
</label>States
A disabled chip cannot be interacted with. For hyperlinks, use the .is-disabled class.
<label class="ts-chip is-input">
<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>Structure
A chip can have an image.
<div class="ts-chip is-circular">
<div class="ts-image is-circular">
<img src="user.png">
</div>
Yami Odymel
</div>Variations
A chip can be outlined.
Taiwan
United States
Hong Kong
<div class="ts-chip is-outlined">
<span class="ts-flag is-taiwan-flag is-rounded"></span>
Taiwan
</div>
<div class="ts-chip is-outlined">
<span class="ts-flag is-america-flag is-rounded"></span>
United States
</div>
<div class="ts-chip is-outlined">
<span class="ts-flag is-hong-kong-flag is-rounded"></span>
Hong Kong
</div>A secondary chip has a less visible checked state.
<label class="ts-chip is-toggle is-outlined is-secondary">
<input type="checkbox" checked>
<div class="content">👀 8</div>
</label>
<label class="ts-chip is-input is-outlined is-secondary">
<input type="checkbox" checked>
<div class="content">Free WiFi</div>
</label>A chip can be circular.
Video
Music
<div class="ts-chip is-circular">Video</div>
<div class="ts-chip is-circular">Music</div>A chip can take the full width of its container.
<div class="ts-grid is-3-columns">
<div class="column">
<label class="ts-chip is-fluid is-input is-outlined">
<input type="checkbox" checked>
<div class="content">Small</div>
</label>
</div>
<div class="column">
<label class="ts-chip is-fluid is-input is-outlined">
<input type="checkbox">
<div class="content">Medium</div>
</label>
</div>
<div class="column">
<label class="ts-chip is-fluid is-input is-outlined">
<input type="checkbox">
<div class="content">Large</div>
</label>
</div>
</div>A chip can have spaces before or after.
Post author is
Mac Taylor
Sciuridae Li
is the admin.
It's
Sean Wei
saying.
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.Compositions
Chips can be used to display reactions to a message.
You're banned from the fishing competition for being "too pro at baiting online."
<div class="ts-box">
<div class="ts-content">
<p>You're banned from the fishing competition
for being "too pro at baiting online."</p>
<div class="ts-wrap is-compact">
<label class="ts-chip is-toggle is-secondary is-outlined">
<input type="checkbox" checked>
<div class="content">👌 21</div>
</label>
<label class="ts-chip is-toggle is-secondary is-outlined">
<input type="checkbox">
<div class="content">👀 8</div>
</label>
<div class="ts-chip is-outlined">
<span class="ts-icon is-plus-icon"></span>
</div>
</div>
</div>
</div>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>Chips can be used as additional options in a card.
Sushi PLUS
<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>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 is-compact has-top-spaced">
<div class="column">
<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 is-fluid is-end-aligned">
<button class="ts-button">Submit</button>
</div>
</div>
</div>
</div>Looking for similar components?
