CSS: close-button ​

.instui-close-button — 자체 × 기호를 그리는 투명 아이콘 버튼으로, 세 가지 크기와 온-컬러 변형을 포함합니다.

항상 레이블이 보이지 않는 아이콘 전용 컨트롤로 렌더링되므로 aria-label가 필수이며 선택 사항이 아닙니다; 텍스트 레이블을 유지하는 button의 -without-background ghost 변형과 비교하세요.

Source: close-button.css

TIP

JS 향상 — 이 컴포넌트의 CSS는 자체적으로 렌더링되고 동작합니다; 상호작용 동작을 추가하려면 @pantoken/interactions와 짝지으세요. 아래 수정자 표를 참고하세요.

접근성 ​

아이콘 전용 버튼에 aria-label(예: "닫기")를 부여하고, 비활성 버튼에는 aria-disabled(또는 네이티브 disabled)로 표시하세요.

사용법 ​

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

예제들 ​

html
<button class="instui-close-button -size-sm" aria-label="Close"></button>

수정자 ​

수정자설명
.-color-inverse더 이상 사용되지 않음 — use .-on-color.
.-on-color색이 있는(중립이 아닌) 표면에 배치된 닫기 버튼용입니다.
.-size-largeLarge. -size-lg의 장기형 별칭.
.-size-lg크게(Large).
.-size-md(기본) 중간 크기입니다.
.-size-medium(기본) 중간 크기입니다. -size-md 의 장문 별칭입니다.
.-size-sm작음(Small).
.-size-small작음(Small). -size-sm의 장기형 별칭.

의사 요소 ​

의사 요소설명
::before× 기호, currentColor에 마스크 처리됨.

상태 ​

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

사용된 토큰 ​

Token타입값
--instui-component-base-button-border-radius<length>0.75rem
--instui-component-base-button-large-height<length>3rem
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-primary-ghost-active-background<color>LightDarklight-dark(#1D354F33, rgba(255,255,255,0.1))
--instui-component-base-button-primary-ghost-hover-background<color>LightDarklight-dark(#1D354F1A, rgba(255,255,255,0.1))
--instui-component-base-button-primary-inverse-ghost-active-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-hover-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-small-height<length>2rem
--instui-component-icon-base-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-icon-disabled-base-color<color>LightDarklight-dark(#8D959F, #576773)
--instui-component-icon-disabled-on-color<color>LightDarklight-dark(#C7CACD, #9EA6AD)
--instui-component-icon-on-color<color>#ffffff
--instui-icon-x<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E')
--instui-spacing-space-xs<length>0.25rem

관련 항목 ​

  • button — 범용 액션 버튼.