CSS: button-set

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

Its own chained modifiers (-color-*, -size-*, -shape-*, -toggle, -condensed, -without-background, -without-border, -display-block) 그룹 내 같은 범주의 수식자를 갖지 않은 모든 하위 .instui-button에 대한 기본값을 설정합니다 — 버튼 자체의 수식자 클래스가 항상 그룹의 기본값보다 우선합니다. -icon-* 는 항상 버튼별 설정이며; 그룹에서 읽어오지 않습니다. 사용 중단된 버튼 별칭들 (-ghost, -color-primary-inverse) ) 은 그룹 수준 수식자로 지원되지 않습니다 — 대신 정식 대체값인 (-color-tertiary, -on-color)) 를 사용하세요.

사용법

css

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

예제들

html

<div class="instui-button-set -size-sm -toggle">
  <button class="instui-button">왼쪽</button>
  <button class="instui-button">light</button>
</div>

Per-button override

html

<div class="instui-button-set -color-secondary">
  <button class="instui-button -icon-x">취소</button>
  <button class="instui-button -color-primary -icon-checkmark">확인</button>
</div>

구조

text

.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`	수정되지 않은 모든 하위 항목의 기본값을 테두리 없음으로 설정합니다.

의사 요소

의사 요소	설명
`::after`	—
`::before`	—

상태

상태	설명
`[aria-disabled="true"]`	—
`[aria-pressed="true"]`	—
`:disabled`	—

사용된 토큰

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>`	LightDark`light-dark(#CFF0F6, #00424A)`
`--instui-color-background-interactive-action-ai-secondary-active-top-gradient`	`<color>`	LightDark`light-dark(#F3E5F7, #522965)`
`--instui-color-background-interactive-action-ai-secondary-hover-bottom-gradient`	`<color>`	LightDark`light-dark(#CFF0F6, #00424A)`
`--instui-color-background-interactive-action-ai-secondary-hover-top-gradient`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-background-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-background-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-background-interactive-action-secondary-active`	`<color>`	LightDark`light-dark(#44709f26, #2E5177)`
`--instui-color-background-interactive-action-success-base`	`<color>`	`#037D37`
`--instui-color-background-interactive-action-success-hover`	`<color>`	`#03893D`
`--instui-color-background-muted`	`<color>`	LightDark`light-dark(#F2F4F5, #273540)`
`--instui-color-stroke-interactive-action-ai-bottom-gradient-active`	`<color>`	LightDark`light-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>`	LightDark`light-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>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-stroke-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-stroke-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-stroke-interactive-action-secondary-active`	`<color>`	LightDark`light-dark(#44709f00, #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>`	LightDark`light-dark(#027887, #3CC0D4)`
`--instui-color-text-interactive-action-ai-secondary-top-gradient-base`	`<color>`	LightDark`light-dark(#944FB3, #CAA1D9)`
`--instui-color-text-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#ffffff, #1D354F)`
`--instui-color-text-interactive-action-secondary-base`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-color-text-interactive-action-status-base`	`<color>`	`#ffffff`
`--instui-component-base-button-ai-disabled-background-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-ai-disabled-border-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-ai-disabled-text-color`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#ffffff, #1D354F)`
`--instui-component-base-button-primary-disabled-background-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-primary-disabled-border-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-primary-ghost-active-background`	`<color>`	LightDark`light-dark(#1d354f33, #eef4fd33)`
`--instui-component-base-button-primary-ghost-background`	`<color>`	`transparent`
`--instui-component-base-button-primary-ghost-border-color`	`<color>`	LightDark`light-dark(#1d354f66, #eef4fd66)`
`--instui-component-base-button-primary-ghost-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-primary-ghost-hover-background`	`<color>`	LightDark`light-dark(#1d354f1a, #eef4fd1a)`
`--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>`	LightDark`light-dark(#3d658f33, #6c95cc4d)`
`--instui-component-base-button-secondary-active-border-color`	`<color>`	LightDark`light-dark(#44709f00, #86a8d500)`
`--instui-component-base-button-secondary-active-text-color`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-component-base-button-secondary-background`	`<color>`	LightDark`light-dark(#44709F33, #86A8D5)`
`--instui-component-base-button-secondary-border-color`	`<color>`	LightDark`light-dark(#44709f00, #86a8d500)`
`--instui-component-base-button-secondary-color`	`<color>`	LightDark`light-dark(#1D354F, #ffffff)`
`--instui-component-base-button-secondary-disabled-background-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-secondary-disabled-border-color`	`<color>`	LightDark`light-dark(#DFE1E3, #334450)`
`--instui-component-base-button-secondary-disabled-text-color`	`<color>`	LightDark`light-dark(#9EA6AD, #6A7883)`
`--instui-component-base-button-secondary-hover-background`	`<color>`	LightDark`light-dark(#4d7eb333, #92b1d94d)`
`--instui-component-base-button-secondary-hover-border-color`	`<color>`	LightDark`light-dark(#44709f00, #86a8d500)`
`--instui-component-base-button-secondary-hover-text-color`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#1d354f4d, #eef4fd4d)`
`--instui-component-base-button-tertiary-active-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-tertiary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-tertiary-disabled-text-color`	`<color>`	LightDark`light-dark(#AAB0B5, #4A5B68)`
`--instui-component-base-button-tertiary-hover-border-color`	`<color>`	LightDark`light-dark(#1d354f33, #eef4fd33)`
`--instui-component-base-button-tertiary-hover-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-icon-action-ai-disabled-color`	`<color>`	LightDark`light-dark(#9EA6AD, #6A7883)`
`--instui-spacing-space-xs`	`<length>`	`0.25rem`

하위 컴포넌트

button

컴포넌트

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

유틸리티

규칙

Plugins

layout

CSS: button-set

사용법

예제들

Per-button override

구조

수정자

의사 요소

상태

사용된 토큰

하위 컴포넌트

관련 항목

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: button-set ​

사용법 ​

예제들 ​

Per-button override ​

구조 ​

수정자 ​

의사 요소 ​

상태 ​

사용된 토큰 ​

하위 컴포넌트 ​

관련 항목 ​

CSS: button-set

사용법

예제들

Per-button override

구조

수정자

의사 요소

상태

사용된 토큰

하위 컴포넌트

관련 항목