Tone 色調

設定元件的色調，連帶決定背景與文字顏色。

用法

<button sl-button sl-tone="danger">刪除</button>
<span sl-chip sl-tone="success">完成</span>

原始碼

<button sl-button>按鈕</button>

sl-tone-primarysecondarysuccesswarningdanger色調

- 表示不寫這個屬性，用預設值；元件標記欄位的 - 是寫裸屬性

各色調套用於按鈕的效果：

原始碼

<button sl-button>按鈕</button>
<button sl-button sl-tone="primary">按鈕</button>
<button sl-button sl-tone="secondary">按鈕</button>
<button sl-button sl-tone="success">按鈕</button>
<button sl-button sl-tone="warning">按鈕</button>
<button sl-button sl-tone="danger">按鈕</button>

選項

選項	用途
primary	主色
secondary	次要色
success	成功與完成的回饋
warning	需要留意的提醒
danger	錯誤與危險操作

適用元件

未標示色調時，各元件的預設行為不同：

元件	未標示時
sl-button	primary
sl-card	primary，只作用於邊緣強調條，卡片底色不變
sl-icon	隨文字顏色
sl-dot	隨文字顏色
sl-chip	中性底色，由文字顏色推導
sl-notice	primary 的淺色底