CSS: button-set

.instui-button-set — 有缝隙（贴合、无间隙）的按钮行，仅外侧两个角为圆角。

它自身的级联修饰符（-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) 会为每个子项设置默认值 .instui-button，但同一类别中未设置自身修饰符的子项除外——按钮自身的 修饰符类始终优先于组的默认值。-icon-*始终针对单个按钮；它 不会从组中读取。已弃用的按钮别名（-ghost, -color-primary-inverse) 不支持作为组级修饰符——请改用其规范替代项 (-color-tertiary, -on-color)。每个连接处都会显示一道 1px 的接缝，颜色与按钮自身的边框相同（纯色填充的边框颜色与填充色一致，因此接缝会呈现标签文字的颜色). -without-seam仅适用于组：它会隐藏这道接缝，使按钮看起来像 一个连续的控件。 将 -width-half用于单独的纯图标子按钮，可创建分体操作 触发器，其宽度为标准正方形的一半，高度与完整按钮相同。

用法

@import "@pantoken/plugin-custom-components/custom-components.css";

Per-button override

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">取消</button>
  <button class="instui-button -color-primary -icon-checkmark">确认</button>
</div>

Flush (no seams)

<div class="instui-button-set -without-seam">
  <button class="instui-button">天</button>
  <button class="instui-button"> 第1周</button>
  <button class="instui-button">月</button>
</div>

Split action

Put -width-half on only the icon-only trigger to give it half the standard square button's width, keeping the full height. The main action can have a text label or be an icon-only square button. Group sizes and per-button size overrides apply; the width isn't a fraction of the main action. Give the icon-only button an accessible name. This example shows layout only: wire the trigger to a real menu and manage its expanded state and focus in your application.

<div class="instui-button-set -color-primary" role="group" aria-label="Save actions">
  <button class="instui-button" type="button">保存更改</button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More save actions"></button>
</div>
<div class="instui-button-set -size-md" role="group" aria-label="Add actions">
  <button class="instui-button -shape-square -icon-plus" type="button" aria-label="Add"></button>
  <button class="instui-button -width-half -icon-chevron-down" type="button" aria-label="More add actions"></button>
</div>

结构

.instui-button-set
  button (component, 1..n)

flowchart TD n0[".instui-button-set"]:::cssdoc-root n1(["button"]):::cssdoc-component n0 -->|1..n| n1 click n1 "/api/css/button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

修饰符

修饰符	描述
.-color-ai	将每个未修改的子元素默认设为 AI 渐变样式。
.-color-ai-secondary	将每个未修改的子元素默认设为较低强调的 AI 样式。
.-color-danger	将每个未修改的子元素默认设为破坏性颜色。
.-color-primary	将每个未修改的子元素默认设为主色。
.-color-secondary	将每个未修改的子元素默认设为次色。
.-color-success	将每个未修改的子元素默认设为成功色。
.-color-tertiary	将每个未修改的子元素默认设为第三色（文本样式）)。
.-condensed	将每个未修改的子元素默认设为更紧凑的内边距。
.-display-block	将每个未修改的子元素布局为全宽。
.-on-color	将每个未修改的子元素默认用于彩色表面上的展示。
.-shape-circle	将每个未修改的子元素默认设为圆形图标按钮。
.-shape-square	将每个未修改的子元素默认设为方形图标按钮。
.-size-lg	将每个未修改的子元素默认设为大号。
.-size-md	（默认）中等尺寸。
.-size-sm	将每个未修改的子元素默认设为小号。
.-toggle	将每个未修改的子元素默认设为按下状态切换样式。
.-without-background	将每个未修改的子元素默认设为无填充。
.-without-border	将每个未修改的子元素默认设为无边框。
.-without-seam	隐藏按钮之间的 1px 接缝。

伪元素

伪元素	描述
::after	—
::before	—

状态

状态	描述
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—

无障碍

为相关操作使用带标签的组；当按钮表示切换选项时，使用 aria-pressed 暴露每种状态。为纯图标按钮提供可访问名称。半宽触发器的目标区域较窄（标准尺寸下为 16px、20px 或 24px)；请确保目标之间有足够间距，或在触屏界面中使用全宽正方形按钮。

规则 (axe-core)	品牌重塑（浅色)	品牌重塑（深色)	Canvas	画布高对比度
color-contrastWCAG 2.2 1.4.3	需要审核	需要审核	需要审核	需要审核
	元素必须达到最低颜色对比度阈值 .-color-ai > button:nth-child(1) .-color-ai-secondary > button:nth-child(1)
target-sizeWCAG 2.2 2.5.8	Fail	Fail	Fail	Fail
	所有触控目标的尺寸都必须至少为 24px，或彼此之间留有足够的间距 .-color-primary[aria-label="Save actions"][role="group"]:nth-child(19) > .-wi... .-color-primary[aria-label="Save actions"][role="group"]:nth-child(22) > .-wi... button[aria-label="More add actions"]

条件	品牌重塑（浅色)	品牌重塑（深色)	Canvas	画布高对比度
forced-colors-focus-visibleWCAG 2.2 1.4.11, 2.4.7	Pass	Pass	Pass	Pass
more-contrast-respectedWCAG 2.2 1.4.3、1.4.6	Fail	Fail	Fail	Fail
	重新品牌化（浅色): 启用 prefers-contrast: more 时，有六处文本低于最低对比度要求。最差的是“发送”，对比度为 1.64:1（需要 4.5:1). 重新品牌化（深色): 启用 prefers-contrast: more 时，有六处文本低于最低对比度要求。最差的是“发送”，对比度为 1.78:1（需要 4.5:1). Canvas，Canvas 高对比度： 启用 prefers-contrast: more 时，有两处文本低于最低对比度要求。最差的是“改写”，对比度为 1.88:1（需要 4.5:1).
reduced-motion-respectedWCAG 2.2 2.3.3, 2.2.2	不适用	Pass	Pass	不适用
reduced-transparency-respectedWCAG 2.2 1.4.3、1.4.11	Pass	Pass	不适用	不适用
reflow-at-320pxWCAG 2.2 1.4.10	Fail	Fail	Fail	Fail
	在 320px 宽的窗口中，页面会横向滚动（页面宽 592px，窗口宽 320px)），且有一个元素延伸到了右边缘之外：button.instui-button 延伸到 592px。WCAG 1.4.10 重排（AA 级)）豁免了数据表和地图等二维内容，因此应由使用者判断此豁免是否适用。
text-spacing-no-clippingWCAG 2.2 1.4.12	Pass	Pass	Pass	Pass

屏幕阅读器（模拟)	品牌重塑（浅色)	品牌重塑（深色)	Canvas	画布高对比度
Announcements	Pass	Pass	Pass	Pass

这些自动化结果不能证明页面符合 WCAG；仍需进行人工审核。

消耗代币

Token	类型	值
--instui-border-width-md	<length>	0.125rem
--instui-border-width-sm	<length>	0.0625rem
--instui-color-background-interactive-action-ai-bottom-gradient-active	<color>	#01626E
--instui-color-background-interactive-action-ai-bottom-gradient-base	<color>	#027887
--instui-color-background-interactive-action-ai-bottom-gradient-hover	<color>	#00828E
--instui-color-background-interactive-action-ai-secondary-active-bottom-gradient	<color>	LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-active-top-gradient	<color>	LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient	<color>	LightDarklight-dark(#CFF0F6, #00424A)
--instui-color-background-interactive-action-ai-secondary-hover-top-gradient	<color>	LightDarklight-dark(#F3E5F7, #522965)
--instui-color-background-interactive-action-ai-top-gradient-active	<color>	#793F93
--instui-color-background-interactive-action-ai-top-gradient-base	<color>	#944FB3
--instui-color-background-interactive-action-ai-top-gradient-hover	<color>	#9E58BD
--instui-color-background-interactive-action-destructive-active	<color>	#AE161B
--instui-color-background-interactive-action-destructive-base	<color>	#CF1F24
--instui-color-background-interactive-action-destructive-hover	<color>	#E62429
--instui-color-background-interactive-action-primary-active	<color>	LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-background-interactive-action-secondary-active	<color>	light-dark(color-mix(in srgb, #44709F 15%, transparent), #2E5177)
--instui-color-background-interactive-action-success-base	<color>	#037D37
--instui-color-background-interactive-action-success-hover	<color>	#03893D
--instui-color-background-muted	<color>	LightDarklight-dark(#F2F4F5, #273540)
--instui-color-stroke-interactive-action-ai-bottom-gradient-active	<color>	LightDarklight-dark(#01626E, #02717E)
--instui-color-stroke-interactive-action-ai-bottom-gradient-base	<color>	#027887
--instui-color-stroke-interactive-action-ai-bottom-gradient-hover	<color>	#00828E
--instui-color-stroke-interactive-action-ai-top-gradient-active	<color>	LightDarklight-dark(#793F93, #8A49A7)
--instui-color-stroke-interactive-action-ai-top-gradient-base	<color>	#944FB3
--instui-color-stroke-interactive-action-ai-top-gradient-hover	<color>	#9E58BD
--instui-color-stroke-interactive-action-primary-active	<color>	LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-stroke-interactive-action-secondary-active	<color>	light-dark(color-mix(in srgb, #44709F 0%, transparent), #2E5177)
--instui-color-text-interactive-action-ai-active	<color>	#ffffff
--instui-color-text-interactive-action-ai-base	<color>	#ffffff
--instui-color-text-interactive-action-ai-hover	<color>	#ffffff
--instui-color-text-interactive-action-ai-secondary-bottom-gradient-base	<color>	LightDarklight-dark(#027887, #3CC0D4)
--instui-color-text-interactive-action-ai-secondary-top-gradient-base	<color>	LightDarklight-dark(#944FB3, #CAA1D9)
--instui-color-text-interactive-action-primary-base	<color>	LightDarklight-dark(#ffffff, #1D354F)
--instui-color-text-interactive-action-secondary-base	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-color-text-interactive-action-status-base	<color>	#ffffff
--instui-component-base-button-ai-disabled-background-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-border-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-ai-disabled-text-color	<color>	LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-border-radius	<length>	0.75rem
--instui-component-base-button-large-font-size	<length>	1.125rem
--instui-component-base-button-large-height	<length>	3rem
--instui-component-base-button-large-padding-horizontal	<length>	1.25rem
--instui-component-base-button-medium-font-size	<length>	1rem
--instui-component-base-button-medium-height	<length>	2.5rem
--instui-component-base-button-medium-padding-horizontal	<length>	1rem
--instui-component-base-button-primary-color	<color>	LightDarklight-dark(#ffffff, #1D354F)
--instui-component-base-button-primary-disabled-background-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-ghost-active-background	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-background	<color>	transparent
--instui-component-base-button-primary-ghost-border-color	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-primary-inverse-active-background	<color>	#E2EAF7
--instui-component-base-button-primary-inverse-background	<color>	#ffffff
--instui-component-base-button-primary-inverse-border-color	<color>	#ffffff
--instui-component-base-button-primary-inverse-color	<color>	#213D5B
--instui-component-base-button-primary-inverse-hover-background	<color>	#EEF4FD
--instui-component-base-button-primary-on-color-active-border-color	<color>	#B6CCEA
--instui-component-base-button-primary-on-color-active-text-color	<color>	#213D5B
--instui-component-base-button-primary-on-color-disabled-background-color	<color>	#8D959F
--instui-component-base-button-primary-on-color-disabled-border-color	<color>	#8D959F
--instui-component-base-button-primary-on-color-disabled-text-color	<color>	#4A5B68
--instui-component-base-button-primary-on-color-hover-border-color	<color>	#D5E2F6
--instui-component-base-button-primary-on-color-hover-text-color	<color>	#213D5B
--instui-component-base-button-secondary-active-background	<color>	hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l * 0.85))
--instui-component-base-button-secondary-active-border-color	<color>	color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-active-text-color	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background	<color>	LightDarklight-dark(#44709f33, #86a8d54d)
--instui-component-base-button-secondary-border-color	<color>	color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-color	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-disabled-background-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-border-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-secondary-disabled-text-color	<color>	LightDarklight-dark(#9EA6AD, #6A7883)
--instui-component-base-button-secondary-hover-background	<color>	hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l + (100 - l) * 0.4))
--instui-component-base-button-secondary-hover-border-color	<color>	color-mix(in srgb, light-dark(#44709f33, #86a8d54d) 0%, transparent)
--instui-component-base-button-secondary-hover-text-color	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-small-font-size	<length>	0.875rem
--instui-component-base-button-small-height	<length>	2rem
--instui-component-base-button-small-padding-horizontal	<length>	0.75rem
--instui-component-base-button-tertiary-active-border-color	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--instui-component-base-button-tertiary-active-text-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color	<color>	LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color	<color>	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-tertiary-hover-text-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-icon-action-ai-disabled-color	<color>	LightDarklight-dark(#9EA6AD, #6A7883)
--instui-spacing-space-xs	<length>	0.25rem

子组件

• button

相关

• close-button — 仅图标的关闭按钮。