CSS: button-set

.instui-button-set — 솔기(맞붙음, 간격 0)의 버튼 행으로, 외부 두 모서리만 둥글게 처리됩니다.

고유한 체인형 modifier(-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block)은 각 자식 요소에 기본값을 설정합니다 .instui-button같은 카테고리에서 자체 modifier를 지정하지 않은 경우에만 적용됩니다. 버튼 자체의 modifier 클래스는 항상 그룹의 기본값보다 우선합니다. -icon-*은 항상 버튼별로 지정하며, 그룹에서 가져오지 않습니다. 폐기 예정인 버튼 별칭(-ghost, -color-primary-inverse) 은 그룹 수준 modifier로 지원되지 않습니다. 대신 정식 대체 항목 (-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	수정되지 않은 모든 하위 항목의 기본값을 3차(텍스트 스타일) 색상으로 설정합니다.
.-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를 적용하면 텍스트 여섯 곳의 대비가 최소 기준에 미달합니다. 가장 낮은 것은 "Send"로, 1.64:1입니다 (필요 기준: 4.5:1). 리브랜딩 (다크): prefers-contrast: more를 적용하면 텍스트 여섯 곳의 대비가 최소 기준에 미달합니다. 가장 낮은 것은 "Send"로, 1.78:1입니다 (필요 기준: 4.5:1). Canvas, Canvas 고대비: prefers-contrast: more를 적용하면 텍스트 두 곳의 대비가 최소 기준에 미달합니다. 가장 낮은 것은 "Rewrite"로, 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 너비의 창에서 페이지가 가로로 스크롤됩니다 (320px 너비의 창에서 페이지 너비는 592px입니다)). 또한 요소 하나가 오른쪽 가장자리를 넘어갑니다: button.instui-button는 592px에서 끝납니다. WCAG 1.4.10 리플로우 (AA 등급))는 데이터 표와 지도처럼 2차원 콘텐츠를 예외로 하므로, 해당되는지는 사람이 판단해야 합니다.
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 — 아이콘 전용 닫기 버튼.