Close - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<button class="ts-close"></button>

States

Disabled

A disabled close button is non-interactive. For hyperlinks, use the .is-disabled style.

<button class="ts-close" disabled></button>
<a class="ts-close is-disabled"></a>

Variations

Secondary

A less prominent style.

<button class="ts-close is-secondary"></button>

Tertiary

A style that can be omitted.

<button class="ts-close is-tertiary"></button>

Rounded

A close button with slightly rounded corners.

<button class="ts-close is-rounded"></button>

Sizes

A close button can have different sizes.

<button class="ts-close is-small"></button>
<button class="ts-close"></button>
<button class="ts-close is-large"></button>
<button class="ts-close is-big"></button>

Spaced

A close button can have spaces before or after.

Solve the error of Docker

NextCloud with video preview

Logitech Gaming Mouse

Solve the error of Docker <button class="ts-close is-start-spaced"></button>
<button class="ts-close is-end-spaced"></button> NextCloud with video preview
Logitech <button class="ts-close is-spaced"></button> Gaming Mouse

Compositions

Delete Button

Place a close button in Chip to make it look like a removable option.

Caris Events

Leria

<div class="ts-chip is-circular">
    Caris Events
    <button class="ts-close"></button>
</div>
<div class="ts-chip is-circular is-outlined">
    Leria
    <button class="ts-close is-secondary"></button>
</div>

Table

Close buttons can be used in a Table to delete rows.

	Description
	Localization feature.
	Image processing library, Imagick is required.
	A HTML5 game engine.

<div class="ts-box">
    <table class="ts-table">
        <thead>
            <tr>
                <th class="is-collapsed"></th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <button class="ts-close is-secondary"></button>
                </td>
                <td>Localization feature.</td>
            </tr>
            <tr>
                <td>
                    <button class="ts-close is-secondary"></button>
                </td>
                <td>Image processing library, Imagick is required.</td>
            </tr>
            <tr>
                <td>
                    <button class="ts-close is-secondary"></button>
                </td>
                <td>A HTML5 game engine.</td>
            </tr>
        </tbody>
    </table>
</div>

Looking for similar components?

Button