一般按鈕 .lct-btn
基底 class 是 .lct-btn，再加上一個變體修飾子決定外觀。
<button class="lct-btn lct-btn--primary">加入</button>
<button class="lct-btn lct-btn--ghost">Ghost</button>
<button class="lct-btn lct-btn--secondary">取消</button>
<button class="lct-btn lct-btn--danger">確認移除</button>
變體
| 修飾子 | 外觀 | 用途 |
|---|---|---|
--primary |
紅底白字 | 主要動作（加入、建立、套用） |
--ghost |
透明底、紅框紅字 | 次要動作 |
--secondary |
白底灰框 | 取消、返回 |
--danger |
紅底白字 | 破壞性確認（刪除、移除） |
尺寸
<button class="lct-btn lct-btn--primary lct-btn--sm">小</button>
<button class="lct-btn lct-btn--primary">預設</button>
<button class="lct-btn lct-btn--primary lct-btn--lg">大</button>
<button class="lct-btn lct-btn--primary lct-btn--block">滿版（100% 寬）</button>
停用狀態
加上原生 disabled 屬性，或 .is-disabled class：
<button class="lct-btn lct-btn--primary" disabled>停用</button>
Icon 按鈕 .lct-icon-btn
只放圖示的方形按鈕，常用於 Header 右上角。內部放一個 .lct-icon（SVG）。
<button class="lct-icon-btn" aria-label="設定">
<svg class="lct-icon" viewBox="0 0 256 256"><!-- 你的 icon path --></svg>
</button>
<!-- 啟用態 -->
<button class="lct-icon-btn lct-icon-btn--active" aria-label="側欄">
<svg class="lct-icon" viewBox="0 0 256 256"><!-- ... --></svg>
</button>
收藏愛心 .lct-favorite
可切換的愛心收藏鈕。搭配 data-lct-toggle="favorite"，lucent-ui.js 會自動處理點擊切換與 is-active 狀態。
<button class="lct-favorite" data-lct-toggle="favorite" aria-label="收藏">
<svg class="lct-icon" viewBox="0 0 256 256">
<path fill="currentColor" d="M178 40c-20.65 0-38.73 8.88-50 23.89C116.73 48.88 98.65 40 78 40a62.07 62.07 0 0 0-62 62c0 70 103.79 126.66 108.21 129a8 8 0 0 0 7.58 0C136.21 228.66 240 172 240 102a62.07 62.07 0 0 0-62-62Z"/>
</svg>
</button>
被點選後元素會多出 is-active（愛心變紅）並觸發 lct:favorite 事件，event.detail.active 為目前狀態：
document.addEventListener('lct:favorite', function (e) {
console.log('收藏狀態：', e.detail.active); // true / false
});
圖示 .lct-icon
所有圖示用 .lct-icon 統一尺寸與著色（fill: currentColor，所以顏色跟著文字走）。尺寸修飾子：--sm（15px）、預設（18px）、--lg（28px）；也可直接覆寫變數 --lct-icon-size 指定任意尺寸。
Lucent 的圖示採用 Phosphor Icons 的 viewBox="0 0 256 256" 規格。你可以自由替換成任何 SVG，只要掛上 class="lct-icon" 即可繼承尺寸與顏色。