按鈕
可供使用者點擊並執行動作的互動元素。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<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-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-wrap">
    <button class="ts-button">發表</button>
    <button class="ts-button is-negative is-outlined">放棄草稿</button>
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n