按鈕 - Tocas UI

初入上手

開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive

格局設計

箱型容器 Box 絕對置中 Center 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 空白間隔 Space 水平排列 Row 間隔容器 Wrap

表單

按鈕 Button 核取方塊 Checkbox 欄位分組 Fieldset 檔案上傳 File 輸入欄位 Input 選項按鈕 Radio 下拉式選擇 Select 項目切換 Selection 指撥開關 Switch

文字與段落

分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text

視覺回饋

圓形量測計 Gauge 讀取狀態 Loading 彈出視窗 Modal 提示訊息 Notice 預置內容 Placeholder 步驟指示器 Procedure 進度條 Progress 簡短通知 Snackbar

多媒體與圖示

大頭貼 Avatar 國家旗幟 Flag 圖示 Icon 圖示項目 Iconset 多媒體圖片 Image 圖片組合 Imageset

資料顯示

可折疊內容 Accordion 計數徽章 Badge 檢查清單 Checklist 關聯標籤 Chip 關閉按鈕 Close 交談會話 Conversation 清單 List 中繼資料 Meta 評分 Rating 統計數據 Statistic 表格 Table

導覽

導覽標記 Breadcrumb 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab

應用程式

格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

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

在尋找相似的元件嗎？

關閉按鈕

狀態

停用的 is-disabled 讀取中 is-loading

外觀

次要的 is-secondary 外框線的 is-outlined 負面的 is-negative 虛無的 is-ghost 圓角的 is-circular 圖示的 is-icon 側邊圖示的 is-start-icon 圖示標籤的 is-start-labeled-icon 流動的 is-fluid 較寬的 is-wide 尺寸 is-small 較密的 is-dense

組合應用

鄰近按鈕 {{ts-wrap}}