按钮 · Bootstrap 6.0 中文文档

基础类

按钮都有一个标准的 .btn 类，用于设置内边距、内容对齐等基础样式，同时提供保证基本无障碍性的后备视觉样式。把这个类换成其他按钮类，就能为特定按钮变体和主题应用不同的视觉样式。

HTML

<button type="button" class="btn">Base class</button>

.btn 类旨在作为自定义按钮样式的起点，而我们提供的按钮变体既可以与 .theme-* 类一起使用，也可以作为自定义样式的基础。

演练场

Bootstrap 包含多种按钮变体，每种都有各自的语义用途，另外还提供了一些额外样式以便更精细地控制。配合我们的工具类，你就拥有了一套非常强大的默认样式。

HTML

<button type="button" class="btn-solid theme-primary btn-sm" data-button-type="text">Button</button>
<button type="button" class="btn-solid theme-primary" data-button-type="left-icon">
  <svg class="bi" width="16" height="16" aria-hidden="true">
    <use href="#arrow-left" />
  </svg>
  Left icon
</button>
<button type="button" class="btn-solid theme-primary btn-sm" data-button-type="right-icon">
  Right icon
  <svg class="bi" width="16" height="16" aria-hidden="true">
    <use href="#arrow-right" />
  </svg>
</button>
<button type="button" class="btn-solid btn-icon theme-primary btn-sm" data-button-type="icon-only" aria-label="Icon only">
  <svg class="bi" width="16" height="16" aria-hidden="true">
    <use href="#plus-lg" />
  </svg>
</button>

变体

一次性比较所有按钮变体与样式：

HTML

<button type="button" class="btn-solid theme-primary">Primary</button>
<button type="button" class="btn-outline theme-primary">Primary</button>
<button type="button" class="btn-subtle theme-primary">Primary</button>
<button type="button" class="btn-text theme-primary">Primary</button>
<button type="button" class="btn-solid theme-accent">Accent</button>
<button type="button" class="btn-outline theme-accent">Accent</button>
<button type="button" class="btn-subtle theme-accent">Accent</button>
<button type="button" class="btn-text theme-accent">Accent</button>
<button type="button" class="btn-solid theme-success">Success</button>
<button type="button" class="btn-outline theme-success">Success</button>
<button type="button" class="btn-subtle theme-success">Success</button>
<button type="button" class="btn-text theme-success">Success</button>
<button type="button" class="btn-solid theme-danger">Danger</button>
<button type="button" class="btn-outline theme-danger">Danger</button>
<button type="button" class="btn-subtle theme-danger">Danger</button>
<button type="button" class="btn-text theme-danger">Danger</button>
<button type="button" class="btn-solid theme-warning">Warning</button>
<button type="button" class="btn-outline theme-warning">Warning</button>
<button type="button" class="btn-subtle theme-warning">Warning</button>
<button type="button" class="btn-text theme-warning">Warning</button>
<button type="button" class="btn-solid theme-info">Info</button>
<button type="button" class="btn-outline theme-info">Info</button>
<button type="button" class="btn-subtle theme-info">Info</button>
<button type="button" class="btn-text theme-info">Info</button>
<button type="button" class="btn-solid theme-inverse">Inverse</button>
<button type="button" class="btn-outline theme-inverse">Inverse</button>
<button type="button" class="btn-subtle theme-inverse">Inverse</button>
<button type="button" class="btn-text theme-inverse">Inverse</button>
<button type="button" class="btn-solid theme-secondary">Secondary</button>
<button type="button" class="btn-outline theme-secondary">Secondary</button>
<button type="button" class="btn-subtle theme-secondary">Secondary</button>
<button type="button" class="btn-text theme-secondary">Secondary</button>

无障碍提示：用颜色传达含义

仅用颜色来增加含义只能提供视觉提示，无法传达给屏幕阅读器等辅助技术的用户。请确保含义能从内容本身理解（例如使用足够的颜色对比度显示可见文本），或通过其他方式表达，例如用 .visually-hidden 类隐藏的附加文本。

链接按钮

使用 .btn-link 类创建外观像链接的按钮。

HTML

<button type="button" class="btn btn-link">Link</button>

链接按钮也可以用主题色设置样式。

HTML

<button type="button" class="btn btn-link theme-primary">Primary</button>
<button type="button" class="btn btn-link theme-accent">Accent</button>
<button type="button" class="btn btn-link theme-success">Success</button>
<button type="button" class="btn btn-link theme-danger">Danger</button>
<button type="button" class="btn btn-link theme-warning">Warning</button>
<button type="button" class="btn btn-link theme-info">Info</button>
<button type="button" class="btn btn-link theme-inverse">Inverse</button>
<button type="button" class="btn btn-link theme-secondary">Secondary</button>

样式化按钮

使用 .btn-styled 修饰类为实心按钮添加渐变和阴影，增加视觉层次。这样会呈现更具立体感的外观，还可以通过 CSS 变量进一步自定义。

HTML

<button class="btn-solid btn-styled theme-primary">Primary</button>
<button class="btn-solid btn-styled theme-accent">Accent</button>
<button class="btn-solid btn-styled theme-success">Success</button>
<button class="btn-solid btn-styled theme-danger">Danger</button>
<button class="btn-solid btn-styled theme-warning">Warning</button>
<button class="btn-solid btn-styled theme-info">Info</button>
<button class="btn-solid btn-styled theme-inverse">Inverse</button>
<button class="btn-solid btn-styled theme-secondary">Secondary</button>

渐变和阴影可以通过 CSS 变量自定义：

变量	描述
`--bs-btn-gradient-start`	渐变顶部（默认：`rgb(255 255 255 / 12.5%)`）
`--bs-btn-gradient-end`	渐变底部（默认：`rgb(0 0 0 / 7.5%)`）
`--bs-btn-border-mix-color`	与按钮背景混合的颜色（默认：`#000`）
`--bs-btn-border-mix-amount`	与按钮背景混合的颜色量（默认：`10%`）
`--bs-btn-border-hover-mix-amount`	悬停时与按钮背景混合的颜色量（默认：`12.5%`）
`--bs-btn-border-active-mix-amount`	激活时与按钮背景混合的颜色量（默认：`20%`）
`--bs-btn-shadow`	静止状态阴影
`--bs-btn-active-shadow`	按下/激活状态阴影

按钮标签

.btn 类是为 <button> 元素设计的。不过，你也可以在 <a> 或 <input> 元素上使用这些类（不过某些浏览器可能呈现略有不同）。

在 <a> 元素上使用按钮类来触发页内功能（例如折叠内容），而不是链接到新页面或当前页面的其他位置时，应为这些链接添加 role="button"，以便向屏幕阅读器等辅助技术准确传达其用途。

链接

HTML

<a class="btn-solid theme-primary" href="#" role="button">Link</a>
<button class="btn-solid theme-primary" type="submit">Button</button>
<input class="btn-solid theme-primary" type="button" value="Input">
<input class="btn-solid theme-primary" type="submit" value="Submit">
<input class="btn-solid theme-primary" type="reset" value="Reset">

尺寸

想要更大或更小的按钮？添加 .btn-lg 或 .btn-sm 来获得额外尺寸。

HTML

<button type="button" class="btn-solid theme-primary btn-lg">Large button</button>
<button type="button" class="btn-solid theme-secondary btn-lg">Large button</button>

HTML

<button type="button" class="btn-solid theme-primary btn-sm">Small button</button>
<button type="button" class="btn-solid theme-secondary btn-sm">Small button</button>

HTML

<button type="button" class="btn-solid theme-primary btn-xs">Extra small button</button>
<button type="button" class="btn-solid theme-secondary btn-xs">Extra small button</button>

你甚至可以用 CSS 变量自定义尺寸：

HTML

<button type="button" class="btn-solid theme-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

图标按钮

使用 .btn-icon 创建只包含图标的方形按钮。这个类会设置 aspect-ratio: 1 并移除内边距，使按钮基于 min-height 成为完美的正方形。纯图标按钮务必添加 aria-label 属性，以确保屏幕阅读器用户可以正常使用。

HTML

<button type="button" class="btn-icon" aria-label="Magic">
  <svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true"><use href="#magic"></use></svg>
</button>
<button type="button" class="btn-solid theme-primary btn-icon" aria-label="Confirm">
  <svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true"><use href="#check2"></use></svg>
</button>
<button type="button" class="btn-outline theme-secondary btn-icon" aria-label="Auto theme">
  <svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true"><use href="#circle-half"></use></svg>
</button>
<button type="button" class="btn-subtle theme-warning btn-icon" aria-label="Light theme">
  <svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true"><use href="#sun-fill"></use></svg>
</button>

结合尺寸类可以获得不同的图标按钮尺寸：

HTML

<button type="button" class="btn-solid theme-primary btn-icon btn-xs" aria-label="Confirm">
  <svg class="bi" width="12" height="12" fill="currentColor" aria-hidden="true"><use href="#check2"></use></svg>
</button>
<button type="button" class="btn-solid theme-primary btn-icon btn-sm" aria-label="Confirm">
  <svg class="bi" width="14" height="14" fill="currentColor" aria-hidden="true"><use href="#check2"></use></svg>
</button>
<button type="button" class="btn-solid theme-primary btn-icon" aria-label="Confirm">
  <svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true"><use href="#check2"></use></svg>
</button>
<button type="button" class="btn-solid theme-primary btn-icon btn-lg" aria-label="Confirm">
  <svg class="bi" width="20" height="20" fill="currentColor" aria-hidden="true"><use href="#check2"></use></svg>
</button>

禁用状态

给任意 <button> 元素添加 disabled 布尔属性，即可让按钮看起来处于非活动状态。禁用按钮具有 pointer-events: none，会阻止触发悬停和激活状态，并带有一些额外样式来表示禁用状态。

HTML

<button type="button" class="btn-solid theme-primary" disabled>Primary button</button>
<button type="button" class="btn-solid theme-secondary" disabled>Button</button>
<button type="button" class="btn-outline theme-primary" disabled>Primary button</button>
<button type="button" class="btn-outline theme-secondary" disabled>Button</button>

在 <a> 元素上禁用按钮的行为略有不同。请使用 .disabled 类而不是属性，让 <a> 元素在视觉上呈现禁用状态。如果需要保留 href 属性，可能还需要额外的 HTML 才能完全禁用链接功能。

主要链接链接

HTML

<a class="btn-solid theme-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn-solid theme-secondary disabled" role="button" aria-disabled="true">Link</a>

如果存在 href 属性，请添加 tabindex="-1" 和 aria-disabled="true"，以阻止键盘聚焦，并防止辅助技术与该链接交互。

主要链接链接

HTML

<a href="#" class="btn-solid theme-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn-solid theme-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

你可能还需要用自定义 JavaScript 完全禁用链接功能。

块级按钮

使用 .d-grid 工具类创建响应式的全宽“块级按钮”堆叠，并用 gap 工具类设置它们之间的间距。

HTML

<div class="d-grid gap-2">
  <button class="btn-solid theme-primary" type="button">Button</button>
  <button class="btn-solid theme-primary" type="button">Button</button>
</div>

这里我们创建一个响应式变体：按钮先垂直堆叠，直到 md 断点时，.md:d-block 取代 .d-grid 类，从而使 gap-2 工具类失效。调整浏览器大小即可看到变化。

HTML

<div class="d-grid gap-2 md:d-block">
  <button class="btn-solid theme-primary" type="button">Button</button>
  <button class="btn-solid theme-primary" type="button">Button</button>
</div>

你可以用网格列宽类调整块级按钮的宽度。例如，半宽的“块级按钮”可以使用 .col-6，再用 .mx-auto 将其水平居中。

HTML

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn-solid theme-primary" type="button">Button</button>
  <button class="btn-solid theme-primary" type="button">Button</button>
</div>

还可以使用其他工具类调整水平排列时按钮的对齐方式。这里我们在前面的响应式示例基础上，添加了一些 flex 工具类和按钮上的外边距工具类，使其在不再堆叠时右对齐。

HTML

<div class="d-grid gap-2 md:d-flex md:justify-content-end">
  <button class="btn-solid theme-primary md:me-2" type="button">Button</button>
  <button class="btn-solid theme-primary" type="button">Button</button>
</div>

切换按钮

在带有按钮类的 <label> 元素上添加 .btn-check，并在其中嵌套复选框或单选输入框，即可创建按钮样式的复选框和单选按钮。输入框会被视觉隐藏，由标签提供按钮外观。如有需要，这些切换按钮还可以组合成按钮组。

在视觉上，这些切换按钮与我们的JavaScript 切换按钮完全相同，但辅助技术传达它们的方式不同。复选框切换按钮会被屏幕阅读器读作“已选中”/“未选中”，因为它们在底层是复选框。JavaScript 切换按钮会被读作“按钮”/“按钮已按下”。具体选择哪种方式，取决于你的用例。

复选框

复选框可以选中、未选中或禁用。基于复选框的切换按钮只切换单个按钮的状态。

已选中切换禁用

HTML

<label class="btn-check btn-solid theme-primary">
  <input type="checkbox" checked autocomplete="off">
  Checked
</label>

<label class="btn-check btn-solid theme-primary">
  <input type="checkbox" autocomplete="off">
  Toggle
</label>

<label class="btn-check btn-solid theme-primary">
  <input type="checkbox" disabled autocomplete="off">
  Disabled
</label>

单选按钮

单选按钮可以选中、未选中或禁用。使用基于单选按钮的切换按钮，可以在具有相同 name 属性值的一组输入按钮之间切换状态。

已选中切换禁用切换

HTML

<label class="btn-check btn-solid theme-primary">
  <input type="radio" name="options" autocomplete="off" checked>
  Checked
</label>

<label class="btn-check btn-solid theme-primary">
  <input type="radio" name="options" autocomplete="off">
  Toggle
</label>

<label class="btn-check btn-solid theme-primary">
  <input type="radio" name="options" disabled autocomplete="off">
  Disabled
</label>

<label class="btn-check btn-solid theme-primary">
  <input type="radio" name="options" autocomplete="off">
  Toggle
</label>

按钮插件

按钮插件让你可以创建简单的开/关切换按钮。

在视觉上，这些切换按钮与我们的输入切换按钮完全相同，但辅助技术传达它们的方式不同。复选框切换按钮会被屏幕阅读器读作“已选中”/“未选中”，因为它们在底层是复选框。JavaScript 切换按钮会被读作“按钮”/“按钮已按下”。具体选择哪种方式，取决于你的用例。

切换状态

添加 data-bs-toggle="button" 来切换按钮的 active 状态。同时添加 aria-pressed，以便辅助技术将该控件播报为切换按钮。默认状态使用 aria-pressed="false"。如果要预先切换按钮，请添加 .active 类并设置 aria-pressed="true"。

HTML

<button type="button" class="btn-solid theme-primary" data-bs-toggle="button" aria-pressed="false">Toggle button</button>
<button type="button" class="btn-solid theme-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn-solid theme-primary" disabled data-bs-toggle="button" aria-pressed="false">Disabled toggle button</button>

切换链接激活的切换链接禁用的切换链接

HTML

<a href="#" class="btn-solid theme-primary" role="button" data-bs-toggle="button" aria-pressed="false">Toggle link</a>
<a href="#" class="btn-solid theme-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn-solid theme-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button" aria-pressed="false">Disabled toggle link</a>

aria-pressed 没有默认值。缺少该属性的按钮会被播报为普通按钮，而不是切换按钮。作为兜底，Bootstrap 会在 DOMContentLoaded 时给每个 [data-bs-toggle="button"] 补上缺失的属性，并根据 .active 类选择取值。无论如何都应在标记中写明，以确保在我们的 JavaScript 运行前状态就是正确的。

通过数据属性

属性	描述
`data-bs-toggle="button"`	通过 Button 插件切换按钮的激活（`pressed`）状态。

依赖项

如果你从源码构建 Bootstrap 的 JS，按钮插件需要以下 JavaScript 文件：

文件	描述
`js/src/button.ts`	按钮主组件
`js/src/base-component.ts`	基础组件类
`js/src/dom/data.ts`	元素数据存储
`js/src/dom/event-handler.ts`	事件处理工具
`js/src/dom/manipulator.ts`	数据属性操作
`js/src/dom/selector-engine.ts`	DOM 选择器工具
`js/src/util/config.ts`	配置基类
`js/src/util/index.ts`	核心工具函数

方法

你可以使用按钮构造函数创建按钮实例，例如：

JavaScript

          const bsButton = new bootstrap.Button('#myButton')

方法	描述
`dispose`	销毁元素的按钮实例。（移除 DOM 元素上存储的数据）
`getInstance`	静态方法，用于获取与 DOM 元素关联的按钮实例，用法如下：`bootstrap.Button.getInstance(element)`。
`getOrCreateInstance`	静态方法，返回与 DOM 元素关联的按钮实例；如果尚未初始化，则创建一个新实例。用法如下：`bootstrap.Button.getOrCreateInstance(element)`。
`toggle`	切换按下状态，使按钮呈现已被激活的外观。

例如，切换所有按钮

JavaScript

          document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

变量

按钮使用 CSS 变量实现实时自定义。这些变量设置在基础 .btn 类上，并由所有按钮变体继承。

scss/buttons/_button.scss

$button-tokens: defaults(
  (
    --btn-gap: var(--btn-input-gap),
    --btn-min-height: var(--btn-input-min-height),
    --btn-padding-x: var(--btn-input-padding-x),
    --btn-padding-y: var(--btn-input-padding-y),
    --btn-font-size: var(--btn-input-font-size),
    --btn-font-weight: var(--btn-input-font-weight),
    --btn-line-height: var(--btn-input-line-height),
    --btn-color: var(--fg-body),
    --btn-white-space: nowrap,
    --btn-border-width: var(--border-width),
    --btn-border-color: transparent,
    --btn-border-radius: var(--radius-5),
    --btn-hover-border-color: transparent,
    --btn-disabled-opacity: .65,
    --btn-transition-property: "color, background-color, border-color, box-shadow",
    --btn-transition-duration: .15s,
    --btn-transition-timing: ease-in-out,
  ),
  $button-tokens
);

每个变体类（.btn-solid、.btn-outline 等）都会根据当前主题色更新这些变量，使按钮在与 .theme-* 类一起使用时自动适配。

样式化按钮使用 $button-styled-tokens Sass map。

scss/buttons/_button.scss

$button-styled-tokens: defaults(
  (
    --btn-gradient-start: rgb(255 255 255 / 12.5%),
    --btn-gradient-end: rgb(0 0 0 / 7.5%) ,
    --btn-border-mix-color: #000,
    --btn-border-mix-amount: 10%,
    --btn-border-hover-mix-amount: 12.5%,
    --btn-border-active-mix-amount: 20%,
    --btn-shadow: "0 1px 2px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 10%)",
    --btn-active-shadow: inset 0 2px 4px rgb(0 0 0 / .15),
  ),
  $button-styled-tokens
);

链接按钮使用 $button-link-tokens Sass map。

scss/buttons/_button.scss

$button-link-tokens: defaults(
  (
    --btn-font-weight: var(--font-weight-normal),
    --btn-color: var(--link-color),
    --btn-bg: transparent,
    --btn-border-color: transparent,
    --btn-hover-color: var(--link-hover-color),
    --btn-hover-bg: transparent,
    --btn-hover-border-color: transparent,
    --btn-active-color: var(--link-hover-color),
    --btn-active-bg: transparent,
    --btn-active-border-color: transparent,
    --btn-disabled-color: var(--fg-3),
    --btn-disabled-border-color: transparent,
  ),
  $button-link-tokens
);

Sass map

尺寸

按钮尺寸在 $button-sizes Sass map 中定义。每个尺寸通过 Sass 循环指定若干变量。它们大多与文本型表单控件保持一致。

scss/buttons/_button.scss

$button-sizes: ();
$button-sizes: defaults(
  ("xs", "sm", "lg"),
  $button-sizes
);

变体

按钮变体在 $button-variants Sass map 中定义。每个变体指定其基础、悬停和激活状态使用哪些主题色 token。该 map 使用 token 名称（如 "bg"、"contrast"、"border"），引用当前主题的调色板。

scss/buttons/_button.scss

$button-variants: defaults(
  (
    "solid": (
      "base": (
        "bg": "bg",
        "color": "contrast",
        "border-color": "bg"
      ),
      "hover": (
        "bg": "bg",
        "border-color": "bg",
        "color": "contrast"
      ),
      "active": (
        "bg": "bg",
        "border-color": "bg",
        "color": "contrast"
      )
    ),
    "outline": (
      "base": (
        "bg": "transparent",
        "color": "fg",
        "border-color": "border"
      ),
      "hover": (
        "bg": "bg",
        "color": "contrast",
        "border-color": "bg"
      ),
      "active": (
        "bg": "bg",
        "color": "contrast",
        "border-color": "bg"
      )
    ),
    "subtle": (
      "base": (
        "bg": "bg-subtle",
        "color": "fg",
        "border-color": "transparent"
      ),
      "hover": (
        "bg": ("bg-muted", "bg-subtle"),
        "color": "fg-emphasis"
      ),
      "active": (
        "bg": "bg-subtle",
        "color": "fg-emphasis"
      )
    ),
    "text": (
      "base": (
        "color": "fg",
        "bg": "transparent",
        "border-color": "transparent"
      ),
      "hover": (
        "color": "fg",
        "bg": "bg-subtle"
      ),
      "active": (
        "color": "fg",
        "bg": "bg-subtle"
      )
    )
  ),
  $button-variants
);

要添加自定义变体，请在导入 Bootstrap 的按钮之前扩展该 map：

SCSS

          @use "bootstrap/scss/buttons/button" with (
  $button-variants: (
    "solid": ( /* ... */ ),
    "outline": ( /* ... */ ),
    "subtle": ( /* ... */ ),
    "text": ( /* ... */ ),
    "ghost": (
      "base": (
        "bg": "transparent",
        "color": "text",
        "border-color": "transparent"
      ),
      "hover": (
        "bg": "bg-subtle",
        "color": "text-emphasis"
      ),
      "active": (
        "bg": "bg-subtle",
        "color": "text-emphasis"
      )
    )
  )
);

要移除不需要的变体，请使用 Sass 的 map.remove()：

SCSS

          @use "sass:map";

@use "bootstrap/scss/buttons/button" as *button* with (
  $button-variants: map.remove($button-variants, "text", "subtle")
);

选择器

$btn-variant-selectors 列表控制哪些选择器会获得基础按钮样式（token、显示、内边距、字体等）。默认包含 .btn、.btn-link、.btn-icon，以及由 $button-variants map 生成的所有类。这意味着像 .btn-solid 这样的变体类可以独立使用，无需 .btn。

scss/buttons/_button.scss

$btn-variant-selectors: (string.unquote(".btn"), string.unquote(".btn-link"), string.unquote(".btn-icon"));
@each $variant, $config in $button-variants {
  $btn-variant-selectors: list.append($btn-variant-selectors, string.unquote(".btn-#{$variant}"), comma);
}

Sass 循环

变体循环

变体循环遍历 $button-variants 生成每个变体类。它使用 map 中定义的主题色 token，为基础、悬停、激活和禁用状态设置 CSS 变量。

scss/buttons/_button.scss

@each $variant, $config in $button-variants {
  .btn-#{$variant} {
    @each $property, $value in map.get($button-variants, $variant, "base") {
      @if $value == "transparent" {
        --btn-#{$property}: transparent;
      } @else {
        --btn-#{$property}: var(--theme-#{$value});
      }
    }

    @each $property, $value in map.get($button-variants, $variant, "active") {
      @if $value == "transparent" {
        --btn-active-#{$property}: transparent;
      } @else if $value == "bg-subtle" {
        --btn-active-#{$property}: var(--theme-#{$value});
      } @else {
        --btn-active-#{$property}: oklch(from var(--theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
      }
    }
    @each $property, $value in map.get($button-variants, $variant, "base") {
      @if $value == "transparent" {
        --btn-disabled-#{$property}: transparent;
      } @else {
        --btn-disabled-#{$property}: var(--theme-#{$value});
      }
    }

    &:hover {
      @each $property, $value in map.get($button-variants, $variant, "hover") {
        @if $value == "transparent" {
          --btn-hover-#{$property}: transparent;
        } @else if meta.type-of($value) == "list" {
          $first-value: list.nth($value, 1);
          $second-value: list.nth($value, 2);
          --btn-hover-#{$property}: color-mix(in oklch, var(--theme-#{$first-value}) 50%, var(--theme-#{$second-value}));
        } @else if $value == "bg-subtle" {
          --btn-hover-#{$property}: var(--theme-#{$value});
        } @else {
          --btn-hover-#{$property}: oklch(from var(--theme-#{$value}) calc(l * .95) calc(c * 1.1) h);
        }
      }
    }

    &:focus-visible {
      outline-color: var(--theme-focus-ring);
    }

    &:active,
    &.active,
    &.btn-check:has(input:checked) {
      @each $property, $value in map.get($button-variants, $variant, "active") {
        @if $value == "transparent" {
          --btn-active-#{$property}: transparent;
        } @else if $value == "bg-subtle" {
          --btn-active-#{$property}: var(--theme-#{$value});
        } @else {
          --btn-active-#{$property}: oklch(from var(--theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
        }
      }
    }

    // Disabled state for toggle buttons
    &:disabled,
    &.disabled,
    &.btn-check:has(input:disabled) {
      @each $property, $value in map.get($button-variants, $variant, "base") {
        @if $value == "transparent" {
          --btn-disabled-#{$property}: transparent;
        } @else {
          --btn-disabled-#{$property}: var(--theme-#{$value});
        }
      }
    }
  }
}

尺寸循环

尺寸循环遍历 $button-sizes 生成尺寸修饰类，为每个尺寸设置相应的 CSS 变量，包括按钮组。

scss/buttons/_button.scss

@each $size, $_ in $button-sizes {
  .btn-#{$size},
  .btn-group-#{$size} > [class*="btn-"] {
    --btn-gap: var(--btn-input-#{$size}-gap);
    --btn-min-height: var(--btn-input-#{$size}-min-height);
    --btn-padding-y: var(--btn-input-#{$size}-padding-y);
    --btn-padding-x: var(--btn-input-#{$size}-padding-x);
    --btn-font-size: var(--btn-input-#{$size}-font-size);
    --btn-line-height: var(--btn-input-#{$size}-line-height);
    --btn-border-radius: var(--btn-input-#{$size}-border-radius);
  }
}