<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-negative">永久銷毀資料</button>
<button class="ts-button is-negative is-outlined">放棄草稿</button>
圓融的圓角能夠呈現出一個行動號召按鈕。
<button class="ts-button is-circular">購買</button>
<button class="ts-button is-circular is-outlined">下載最新版本</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-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>
如果按鈕之間有相鄰另一個按鈕的話,建議使用間隔容器元件令按鈕之間帶有間隔。
<div class="ts-wrap">
<button class="ts-button">發表</button>
<button class="ts-button is-negative is-outlined">放棄草稿</button>
</div>