按鈕 - Tocas UI

停用的

使按鈕呈現無法互動、點擊的模樣。若你希望真正地停用按鈕行為，請在該按鈕增加 disabled 標籤以符合 HTML 規範。

<button class="ts-button is-disabled">無法使用</button>

讀取中

顯示一個旋轉的讀取圖示表示資料正在送出或載入，同時使按鈕呈現無法互動、點擊的模樣。若你希望真正地停用按鈕行為，請在該按鈕增加 disabled 標籤以符合 HTML 規範。

<button class="ts-button is-loading">載入中</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>

按鈕群組

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

<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>

功能按鈕

使用按鈕群組能讓主要按鈕旁邊擺放一個輔助功能按鈕，這通常被稱作為 Split Button（分割按鈕）。輔助按鈕可以搭配選單模組與彈出式選單來提供額外的功能選單。

<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" data-name="dropdown" data-position="bottom-start">
    <button class="item">遊戲設定</button>
    <button class="item">掃描與修復</button>
    <div class="ts-divider"></div>
    <button class="item">移除遊戲</button>
</div>