按鈕與動作

一般按鈕 .lct-btn

基底 class 是 .lct-btn，再加上一個變體修飾子決定外觀。v1.1 依 Figma 校準：基準字級 13px / 行高 18、內距 6px 14px、圓角 6px、字重 Medium。

<button class="lct-btn lct-btn--primary">登入</button>
<button class="lct-btn lct-btn--dark">登出</button>
<button class="lct-btn lct-btn--secondary">取消</button>
<button class="lct-btn lct-btn--ghost">Ghost</button>
<button class="lct-btn lct-btn--danger">確認移除</button>

變體

修飾子	外觀	用途
`--primary`	紅底白字	主要動作（加入、建立、套用、登入）
`--dark`	墨底（`#2b2b2b`）白字，hover 全黑	深色動作（登出；搜尋鈕同色系）
`--secondary`	白底灰框	取消、返回
`--ghost`	透明底、紅框紅字	次要動作（Figma 無此元件，屬補充變體）
`--danger`	紅底白字	破壞性確認（刪除、移除）

尺寸

<button class="lct-btn lct-btn--primary lct-btn--sm">小（12px）</button>
<button class="lct-btn lct-btn--primary">預設（13px）</button>
<button class="lct-btn lct-btn--primary lct-btn--lg">大（14px）</button>
<button class="lct-btn lct-btn--primary lct-btn--block">滿版（100% 寬）</button>

放在確認對話框 .lct-dialog__btns 內的按鈕會自動變成等寬、圓角 8、上下內距 9px、字級 14px，不需要加任何修飾子。詳見「覆蓋層」。

停用狀態

加上原生 disabled 屬性，或 .is-disabled class：

<button class="lct-btn lct-btn--primary" disabled>停用</button>

Icon 按鈕 .lct-icon-btn

只放圖示的方形按鈕（36px、icon 20px），常用於 Header 右上角。內部放一個 .lct-icon（SVG）。尺寸可用 --lct-icon-btn-size 覆寫。

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

<!-- v1.1 新增：白底浮起（如收藏夾詳情的「更多」鈕，Figma 為 30px） -->
<button class="lct-icon-btn lct-icon-btn--raised" style="--lct-icon-btn-size:30px" aria-label="更多">
  <svg class="lct-icon" viewBox="0 0 256 256"><!-- ... --></svg>
</button>

返回鈕 .lct-back-btn（v1.1 新增）

收藏夾詳情頁的返回按鈕：白底浮起、高 32、圓角 6，左箭頭 icon（14px）+ 12px Medium 文字。

<button class="lct-back-btn">
  <svg class="lct-icon" viewBox="0 0 256 256">
    <path fill="currentColor" d="M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z"/>
  </svg>
  返回
</button>

收藏愛心 .lct-favorite

可切換的愛心收藏鈕。v1.1 依 Figma 校準為 28px 圓形白底浮鈕：底 rgba(255,255,255,.9) + 浮起陰影、icon 15px，適合壓在材質縮圖上。搭配 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>

<!-- 去底版本：純圖示、無白底無陰影 -->
<button class="lct-favorite lct-favorite--bare" data-lct-toggle="favorite" aria-label="收藏">
  <svg class="lct-icon" viewBox="0 0 256 256"><!-- 愛心 --></svg>
</button>

變數	預設值	說明
`--lct-fav-size`	`28px`	圓鈕直徑
`--lct-fav-bg`	`rgba(255,255,255,.9)`	底色；設 `transparent` 等同 `--bare`

被點選後元素會多出 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" 即可繼承尺寸與顏色。