按鈕 - Tocas UI

停用的

使按鈕呈現無法互動、點擊的模樣。若按鈕是超連結，則需套用 .is-disabled 樣式。

<button class="ts-button" disabled>停用按鈕</button>
<a class="ts-button is-disabled">停用連結</a>

讀取中

顯示旋轉的讀取圖案，使用需加上 [disabled] 屬性以停用按鈕互動功能。

<button class="ts-button is-loading" disabled>載入中</button>

次要的

較不重要的次級動作按鈕。

<button class="ts-button is-secondary">取消</button>

外框線的

僅有基本結構的外框線按鈕。

<button class="ts-button is-outlined">前往拜訪</button>

負面的

警示使用者這個行為可能具有危險性。

<button class="ts-button is-negative">永久銷毀資料</button>
<button class="ts-button is-negative is-outlined">放棄草稿</button>

虛無的

不被考慮或是極少數會被執行的動作。

<button class="ts-button is-ghost">忘記密碼</button>

圓角的

以圓角呈現出一個行動號召按鈕。

<button class="ts-button is-circular">購買</button>
<button class="ts-button is-circular is-outlined">下載最新版本</button>

圖示的

僅帶有圖示的按鈕。

<button class="ts-button is-icon">
    <span class="ts-icon is-magnifying-glass-icon"></span>
</button>
<button class="ts-button is-icon is-negative is-outlined">
    <span class="ts-icon is-trash-icon"></span>
</button>

側邊圖示的

按鈕的文字旁邊可以帶有輔助圖示。

<button class="ts-button is-start-icon">
    <span class="ts-icon is-cart-plus-icon"></span>
    加入購物車
</button>
<button class="ts-button is-end-icon is-secondary">
    送出
    <span class="ts-icon is-check-icon"></span>
</button>

圖示標籤的

以標籤方式展現的圖示會呈現在按鈕的起始或尾端位置。

<button class="ts-button is-start-labeled-icon">
    <span class="ts-icon is-heart-icon"></span>
    收藏
</button>
<button class="ts-button is-start-labeled-icon is-outlined">
    <span class="ts-icon is-paper-plane-icon"></span>
    送出
</button>
<button class="ts-button is-end-labeled-icon is-secondary">
    星號
    <span class="ts-icon is-star-icon"></span>
</button>

流動的

按鈕的寬度可以填滿整個父容器。

<button class="ts-button is-fluid">登入</button>

寬度

變更按鈕的內距寬度。

<button class="ts-button is-short is-outlined">短的</button>
<button class="ts-button is-outlined">預設</button>
<button class="ts-button is-wide is-outlined">寬的</button>

尺寸

更改按鈕的尺寸與文字大小。

<button class="ts-button is-small">小型按鈕</button>
<button class="ts-button">預設按鈕</button>
<button class="ts-button is-large">大型按鈕</button>

密度

變更按鈕的高度，看起來更緊密或是令人感到寬鬆。

<button class="ts-button is-dense">緊密按鈕</button>
<button class="ts-button">預設按鈕</button>
<button class="ts-button is-relaxed">寬鬆按鈕</button>

按鈕群組

將多個按鈕合併成為一個主體，多個按鈕之間會以略微可見的分隔線區隔。

<div class="ts-buttons">
    <button class="ts-button">送出</button>
    <button class="ts-button is-icon">
        <span class="ts-icon is-chevron-down-icon"></span>
    </button>
</div>
<div class="ts-buttons">
    <button class="ts-button is-outlined">送出</button>
    <button class="ts-button is-outlined is-icon">
        <span class="ts-icon is-chevron-down-icon"></span>
    </button>
</div>

鄰近按鈕

如果按鈕之間有相鄰另一個按鈕的話，建議使用間隔容器元件令按鈕之間帶有間隔。

<div class="ts-wrap">
    <button class="ts-button">發表</button>
    <button class="ts-button is-negative is-outlined">放棄草稿</button>
</div>

喜歡與不喜歡

以按鈕群組來呈現一個喜歡、不喜歡的動作按鈕群組。

<div class="ts-buttons">
    <button class="ts-button is-secondary is-circular is-start-icon">
        <span class="ts-icon is-thumbs-up-icon"></span>
        324
    </button>
    <button class="ts-button is-secondary is-circular is-start-icon">
        <span class="ts-icon is-regular is-thumbs-down-icon"></span>
        7
    </button>
</div>

功能按鈕

在主要按鈕旁邊擺放會開啟彈出式選單的輔助按鈕。

<div class="ts-buttons">
    <button class="ts-button">開始遊戲</button>
    <button class="ts-button is-icon" data-dropdown="dropdown">
        <span class="ts-icon is-gear-icon"></span>
    </button>
</div>
<div class="ts-dropdown" id="dropdown">
    <button class="item">遊戲設定</button>
    <button class="item">掃描與修復</button>
    <div class="divider"></div>
    <button class="item">移除遊戲</button>
</div>