CSS: button

.instui-button — 토큰 팔레트로 스타일링된 접근 가능한 액션 컨트롤; 기본값은 프라이머리입니다.

AI 변형은 프레임에 두 겹의 그라디언트(패딩-박스 채움과 보더-박스 스트로크)를 겹쳐 사용하며, -color-ai-secondary 은 그라디언트 텍스트와 채움을 동시에 그릴 수 없으므로 기본 상태에서는 중앙이 투명하고 호버 또는 액티브 시 채워집니다. -without-background 의 호버 및 액티브 상태는 원시 호버-배경 토큰을 사용하는 대신 약간 어둡고 낮은 불투명도의 브랜드 워시를 유도하여 같은 색상의 텍스트가 보이지 않게 합니다. 또한 자체 아이콘/라벨 gap 및 수평 padding 을 설정합니다; -gap-*/-p-*/-padding-* 스페이싱 유틸리티 모디파이어를 체인하면 내장 값을 재정의합니다. 선택적 .instui-button-group 래퍼는 Figma의 .buttonGroup 를 매핑하고 인접한 버튼 간격을 관리합니다.

Source: button.css

접근성

aria-pressed 로 -toggle 변형의 눌린 상태를 제어하고, 비활성화된 버튼은 aria-disabled (또는 네이티브 disabled) 로 표시합니다.

사용법

@import "@pantoken/components/components.css";
@import "@pantoken/components/button.css";

데모

예제들

<div class="instui-button-group">
  <button class="instui-button">Primary</button>
  <button class="instui-button -color-secondary">Secondary</button>
</div>

구조

그룹 래퍼는 공유된 버튼 간격으로 인접한 버튼들을 배치합니다.

.instui-button-group (0..1)
  .instui-button (1..n)

flowchart TD n0[".instui-button-group (0..1)"]:::cssdoc-root n1(".instui-button"):::cssdoc-part n0 -->|1..n| n1 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-primary-inverse	더 이상 사용되지 않음 — use .-on-color.
.-color-secondary	낮은 강조도의 세컨더리 액션입니다.
.-color-success	긍정/확인 액션입니다.
.-color-tertiary	텍스트 스타일 액션(호버 전까지 채움이나 테두리 없음).
.-condensed	조밀한 툴바를 위한 더 타이트한 패딩.
.-display-block	전체 너비 블록 버튼.
.-ghost	더 이상 사용되지 않음 — use .-color-tertiary.
.-icon-*	레이블 앞에 아이콘 세트의 글리프를 렌더링(예: -icon-arrow-right)하며 버튼의 텍스트 색으로 칠해집니다; 아이콘 전용 버튼에는 -shape-square/-shape-circle 와 짝지어 사용하세요.
.-on-color	색이 있는(중립이 아닌) 표면에 배치된 버튼용입니다. -color-primary(기본)와 조합하면 흰색 채움에 어두운 텍스트가 되고; -color-secondary 과 조합하면 투명하게 유지되며 흰색 테두리와 텍스트가 사용됩니다.
.-shape-circle	둥근 아이콘 버튼입니다.
.-shape-square	정사각형 아이콘 버튼입니다.
.-size-large	Large. -size-lg의 장기형 별칭.
.-size-lg	크게(Large).
.-size-md	(기본) 중간 크기입니다.
.-size-medium	(기본) 중간 크기입니다. -size-md 의 장문 별칭입니다.
.-size-sm	작음(Small).
.-size-small	작음(Small). -size-sm의 장기형 별칭.
.-toggle	눌린 상태의 토글 버튼(aria-pressed 로 제어).
.-without-background	채움을 제거(고스트).
.-without-border	테두리를 제거합니다.

의사 요소

의사 요소	설명
::after	버튼 프레임에만 마스킹된 AI-세컨더리 그라디언트 보더 링.
::before	AI 글리프 — AI 버튼에 자동으로 추가되며 변형의 고유 색으로 마스킹됩니다.

상태

상태	설명
[aria-disabled="true"]	—
[aria-pressed="true"]	—
:disabled	—
:state(pressed)	—

사용된 토큰

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>	LightDarklight-dark(#44709F, #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>	LightDarklight-dark(#44709F, #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(#DFE1E3, #334450)
--instui-component-base-button-primary-disabled-border-color	<color>	LightDarklight-dark(#DFE1E3, #334450)
--instui-component-base-button-primary-ghost-active-background	<color>	LightDarklight-dark(#1D354F33, rgba(255,255,255,0.1))
--instui-component-base-button-primary-ghost-background	<color>	transparent
--instui-component-base-button-primary-ghost-border-color	<color>	LightDarklight-dark(#1D354F66, #EEF4FD)
--instui-component-base-button-primary-ghost-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background	<color>	LightDarklight-dark(#1D354F1A, rgba(255,255,255,0.1))
--instui-component-base-button-primary-inverse-active-background	<color>	#B6CCEA
--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-ghost-active-background	<color>	rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-border-color	<color>	#ffffff
--instui-component-base-button-primary-inverse-ghost-color	<color>	#ffffff
--instui-component-base-button-primary-inverse-ghost-hover-background	<color>	rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-hover-background	<color>	#D5E2F6
--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>	LightDarklight-dark(#3D658F33, #86A8D5)
--instui-component-base-button-secondary-active-border-color	<color>	LightDarklight-dark(#44709F00, #86A8D5)
--instui-component-base-button-secondary-active-text-color	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-background	<color>	LightDarklight-dark(#44709F33, #86A8D5)
--instui-component-base-button-secondary-border-color	<color>	LightDarklight-dark(#44709F00, #86A8D5)
--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>	LightDarklight-dark(#4D7EB333, #86A8D5)
--instui-component-base-button-secondary-hover-border-color	<color>	LightDarklight-dark(#44709F00, #86A8D5)
--instui-component-base-button-secondary-hover-text-color	<color>	LightDarklight-dark(#1D354F, #ffffff)
--instui-component-base-button-secondary-on-color-active-border-color	<color>	#B6CCEA
--instui-component-base-button-secondary-on-color-active-text-color	<color>	#ffffff
--instui-component-base-button-secondary-on-color-disabled-border-color	<color>	#8D959F
--instui-component-base-button-secondary-on-color-disabled-text-color	<color>	#9EA6AD
--instui-component-base-button-secondary-on-color-hover-text-color	<color>	#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>	LightDarklight-dark(#1D354F4D, #EEF4FD)
--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>	LightDarklight-dark(#1D354F33, #EEF4FD)
--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-component-shared-tokens-spacing-gap-buttons	<length>	0.75rem
--instui-font-family-base	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-font-weight-interactive	<integer>	500
--instui-line-height-standalone-text-base	<length>	1rem
--instui-spacing-space-xs	<length>	0.25rem

관련 항목

• close-button — 아이콘 전용 닫기 버튼.