Components

Actions

触发动作的一组核心控件：.ody-btn 按钮及其全部变体、尺寸与状态，图标按钮、按钮组、下拉菜单、复制按钮与链接。交互组件由 dist/odyssey.js 的 data-ody-* 属性零配置驱动。

下方每个预览框都是真实渲染的 .ody- 组件，右上角切换深色即可对照两套主题。下拉、复制等交互直接可点。

Button

基础类 .ody-btn 搭配一个变体修饰符使用。变体覆盖 --primary / --secondary / --ghost / --subtle / --danger / --link。

<button class="ody-btn ody-btn--primary">Primary</button>
<button class="ody-btn ody-btn--secondary">Secondary</button>
<button class="ody-btn ody-btn--ghost">Ghost</button>
<button class="ody-btn ody-btn--subtle">Subtle</button>
<button class="ody-btn ody-btn--danger">Danger</button>
<button class="ody-btn ody-btn--link">Link</button>

尺寸

默认高 40px；--sm 收窄到 32px，--lg 放大到 46px。修饰符可与任意变体叠加。

<button class="ody-btn ody-btn--primary ody-btn--sm">Small</button>
<button class="ody-btn ody-btn--primary">Default</button>
<button class="ody-btn ody-btn--primary ody-btn--lg">Large</button>

带图标

直接在 .ody-btn 内内联 <svg>；图标会被自动约束到 16px 并与文本以 --ody-sp-2 间距对齐，图标可置于文本前或后。

<button class="ody-btn ody-btn--primary">
  <svg viewBox="0 0 24 24">…</svg>
  New file
</button>

<button class="ody-btn ody-btn--secondary">
  Download
  <svg viewBox="0 0 24 24">…</svg>
</button>

状态：禁用与加载

原生 disabled（或 .is-disabled / aria-disabled="true"）置灰并拦截交互；.is-loading 隐藏文本并叠加旋转 spinner，同时锁定点击。

<button class="ody-btn ody-btn--primary" disabled>Disabled</button>
<button class="ody-btn ody-btn--secondary" disabled>Disabled</button>
<button class="ody-btn ody-btn--primary is-loading">Loading</button>
<button class="ody-btn ody-btn--secondary is-loading">Loading</button>

块级按钮

--block 让按钮撑满容器宽度，常用于表单提交或窄侧栏。

<button class="ody-btn ody-btn--primary ody-btn--block">Block button</button>
<button class="ody-btn ody-btn--secondary ody-btn--block">Block secondary</button>

Icon button

.ody-iconbtn 是等宽等高的纯图标按钮，务必提供 aria-label。变体 --outline 加描边表面，--sm 缩到 32px。

<button class="ody-iconbtn" aria-label="Search">
  <svg viewBox="0 0 24 24">…</svg>
</button>
<button class="ody-iconbtn ody-iconbtn--outline" aria-label="Settings">…</button>
<button class="ody-iconbtn ody-iconbtn--sm" aria-label="More">…</button>
<button class="ody-iconbtn" aria-label="Delete" disabled>…</button>

Button group

.ody-btn-group 把相邻按钮拼接成一段，自动处理圆角与边框合并。给某个成员加 .is-active 即可当作单选式分段控件。

<div class="ody-btn-group">
  <button class="ody-btn ody-btn--secondary">Left</button>
  <button class="ody-btn ody-btn--secondary">Center</button>
  <button class="ody-btn ody-btn--secondary">Right</button>
</div>

<div class="ody-btn-group">
  <button class="ody-btn ody-btn--secondary is-active">Day</button>
  <button class="ody-btn ody-btn--secondary">Week</button>
  <button class="ody-btn ody-btn--secondary">Month</button>
</div>

容器 .ody-dropdown 内放一个带 data-ody-toggle 的触发器和一个 .ody-menu。点击切换、点外部或按 Esc 关闭，方向键在项间移动 —— 全部由 odyssey.js 托管，aria-expanded / aria-haspopup 自动补齐。菜单项支持 .ody-menu__label 分组、.ody-menu__sep 分隔与 --danger 危险项。

<div class="ody-dropdown">
  <button class="ody-btn ody-btn--secondary" data-ody-toggle>
    Options
    <svg viewBox="0 0 24 24">…</svg>
  </button>
  <div class="ody-menu">
    <div class="ody-menu__label">Account</div>
    <button class="ody-menu__item"><svg>…</svg>Profile</button>
    <button class="ody-menu__item"><svg>…</svg>Settings</button>
    <div class="ody-menu__sep"></div>
    <button class="ody-menu__item ody-menu__item--danger"><svg>…</svg>Sign out</button>
  </div>
</div>

<!-- 右对齐菜单：给 .ody-menu 加 --right -->
<div class="ody-dropdown">
  <button class="ody-iconbtn ody-iconbtn--outline" data-ody-toggle aria-label="Row actions">…</button>
  <div class="ody-menu ody-menu--right">…</div>
</div>

Copy button

.ody-copy-btn 配 data-ody-copy-text="字面值" 直接复制字符串，或 data-ody-copy="#selector" 复制目标元素的 value / 文本。成功后短暂加 .is-copied 反馈（变绿），由 odyssey.js 处理，无需自写 JS。

--ody-accent: #4f46e5;

<!-- 复制字面值 -->
<button class="ody-copy-btn" data-ody-copy-text="npm i odyssey-ui" aria-label="复制安装命令">
  <svg viewBox="0 0 24 24">…</svg>
  <span>npm i odyssey-ui</span>
</button>

<!-- 复制目标元素文本 -->
<code class="ody-code" id="copy-token">--ody-accent: #4f46e5;</code>
<button class="ody-copy-btn" data-ody-copy="#copy-token" aria-label="复制 token 值">
  <svg viewBox="0 0 24 24">…</svg>
  <span>Copy</span>
</button>

Link

.ody-link 是文本链接：默认无下划线，hover 才出现，配 --ody-accent-ink 色。行内使用时也成立。若需按钮语义但外观像链接，用 .ody-btn--link。

阅读快速上手指南，或直接跳到设计 token 参考。

Standalone link

<a class="ody-link" href="getting-started.html">快速上手指南</a>

<!-- 需要按钮语义、外观像链接时 -->
<button class="ody-btn ody-btn--link" type="button">Button-styled link</button>