此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

按鈕

可供使用者點擊並執行動作的互動元素。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<button class="ts-button">送出</button>
狀態
停用的

使按鈕呈現無法互動、點擊的模樣。若你希望真正地停用按鈕行為,請在該按鈕增加 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>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標