Select Button
2~5개 옵션 중 하나를 고르는 세그먼트 컨트롤입니다. 뷰 전환(목록/카드), 기간(24시간/7일/30일)처럼 즉시 반영되는 선택에 씁니다.
1. Default
선택된 항목에 .on. 컨테이너에 role=group, 버튼에 aria-pressed.
HTML
<div class="select-btn" role="group" aria-label="기간">
<button type="button" class="on" aria-pressed="true">24시간</button>
<button type="button" aria-pressed="false">7일</button>
<button type="button" aria-pressed="false">30일</button>
</div>CSS · .select-btn
/* JS Design System v0.6 · .select-btn · 토큰(var(--*))은 assets/style.css :root 참고 */
.select-btn{display:inline-flex;padding:3px;gap:2px;background:var(--bg-panel);border-radius:var(--radius-md)}
.select-btn button{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 14px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.select-btn button svg{width:16px;height:16px;flex:none}
.select-btn button:hover{color:var(--text-primary)}
.select-btn button.on{background:var(--bg-surface);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-1)}
.select-btn button[disabled]{opacity:.4;cursor:not-allowed}
.select-btn.outline{background:transparent;padding:0;gap:0;border:1px solid var(--border-strong);overflow:hidden}
.select-btn.outline button{border-radius:0;height:36px}
.select-btn.outline button+button{border-left:1px solid var(--border-strong)}
.select-btn.outline button.on{background:var(--accent-subtle);color:var(--accent-text);box-shadow:none}React · @jiran/ds-react
import { SelectButton } from "@jiran/ds-react";
export default function Example() {
return (
<SelectButton
label="기간"
defaultValue="24h"
options={[
{ value: "24h", label: "24시간" },
{ value: "7d", label: "7일" },
{ value: "30d", label: "30일" },
]}
/>
);
}2. Outline
툴바에서 다른 버튼과 나란히 둘 때 아웃라인형.
HTML
<div class="select-btn outline" role="group" aria-label="보기">
<button type="button" class="on" aria-pressed="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l11 0"/><path d="M9 12l11 0"/><path d="M9 18l11 0"/><path d="M5 6l0 .01"/><path d="M5 12l0 .01"/><path d="M5 18l0 .01"/></svg>목록</button>
<button type="button" aria-pressed="false"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -6"/><path d="M15 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -10"/><path d="M9 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -14"/><path d="M4 20h14"/></svg>차트</button>
</div>CSS · .select-btn
/* JS Design System v0.6 · .select-btn · 토큰(var(--*))은 assets/style.css :root 참고 */
.select-btn{display:inline-flex;padding:3px;gap:2px;background:var(--bg-panel);border-radius:var(--radius-md)}
.select-btn button{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 14px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.select-btn button svg{width:16px;height:16px;flex:none}
.select-btn button:hover{color:var(--text-primary)}
.select-btn button.on{background:var(--bg-surface);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-1)}
.select-btn button[disabled]{opacity:.4;cursor:not-allowed}
.select-btn.outline{background:transparent;padding:0;gap:0;border:1px solid var(--border-strong);overflow:hidden}
.select-btn.outline button{border-radius:0;height:36px}
.select-btn.outline button+button{border-left:1px solid var(--border-strong)}
.select-btn.outline button.on{background:var(--accent-subtle);color:var(--accent-text);box-shadow:none}React · @jiran/ds-react
import { SelectButton } from "@jiran/ds-react";
export default function Example() {
return (
<SelectButton
outline
label="보기"
options={[
{ value: "list", label: "목록", icon: "list" },
{ value: "chart", label: "차트", icon: "chart-bar" },
]}
/>
);
}3. Disabled
개별 옵션 비활성.
HTML
<div class="select-btn" role="group">
<button type="button" class="on" aria-pressed="true">전체</button>
<button type="button" aria-pressed="false">차단</button>
<button type="button" aria-pressed="false" disabled>허용</button>
</div>CSS · .select-btn
/* JS Design System v0.6 · .select-btn · 토큰(var(--*))은 assets/style.css :root 참고 */
.select-btn{display:inline-flex;padding:3px;gap:2px;background:var(--bg-panel);border-radius:var(--radius-md)}
.select-btn button{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 14px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.select-btn button svg{width:16px;height:16px;flex:none}
.select-btn button:hover{color:var(--text-primary)}
.select-btn button.on{background:var(--bg-surface);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-1)}
.select-btn button[disabled]{opacity:.4;cursor:not-allowed}
.select-btn.outline{background:transparent;padding:0;gap:0;border:1px solid var(--border-strong);overflow:hidden}
.select-btn.outline button{border-radius:0;height:36px}
.select-btn.outline button+button{border-left:1px solid var(--border-strong)}
.select-btn.outline button.on{background:var(--accent-subtle);color:var(--accent-text);box-shadow:none}React · @jiran/ds-react
import { SelectButton } from "@jiran/ds-react";
export default function Example() {
return (
<SelectButton
options={[
{ value: "all", label: "전체" },
{ value: "block", label: "차단" },
{ value: "allow", label: "허용", disabled: true },
]}
/>
);
}Props
HTML 에서는 클래스와 속성으로, React(@jiran/ds-react)에서는 같은 이름의 prop(variant · size …)으로 변형·상태를 지정합니다.
| Prop / Class | Type · Values | Default | Description |
|---|---|---|---|
| .select-btn | container | — | role=group. 버튼 2~5개 |
| .outline | boolean | false | 아웃라인형(툴바용) |
| .on | boolean | — | 선택 항목. aria-pressed=true 와 함께 |
| disabled | attribute | — | 옵션 비활성 |
Usage
React: @jiran/ds-react 패키지를 설치하고 style.css 를 한 번 import 하면 위 React 탭 코드를 그대로 쓸 수 있습니다(React Package). HTML: assets/style.css 를 연결하고(일부만 필요하면 아래 컴포넌트 CSS 복사), 동작이 필요하면 assets/ds.js 를 함께 넣습니다 — 이 페이지의 프리뷰가 그 스크립트로 동작합니다. 색은 전부 토큰(var(--accent) 등)을 참조하므로 --accent-* 만 제품 컬러로 바꾸면 됩니다.
React @jiran/ds-react
npm i @jiran/ds-react
// main.tsx — 앱 진입점에서 한 번
import "@jiran/ds-react/style.css";
// 컴포넌트
import { SelectButton } from "@jiran/ds-react";HTML
<!-- 1) 토큰 + 전체 컴포넌트 스타일 한 번에 연결 -->
<link rel="stylesheet" href="assets/style.css">
<!-- 동작(드롭다운·탭·달력·표 정렬/선택·토스트 등) — 순수 JS 한 파일. React 제품은 불필요 -->
<script src="assets/ds.js" defer></script>
<!-- 2) 또는 아래 "Component CSS" 만 프로젝트 CSS 에 붙이고,
:root 토큰은 Foundations › Design Token 에서 복사 -->Component CSS .select-btn
/* JS Design System v0.6 · .select-btn · 토큰(var(--*))은 assets/style.css :root 참고 */
.select-btn{display:inline-flex;padding:3px;gap:2px;background:var(--bg-panel);border-radius:var(--radius-md)}
.select-btn button{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 14px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.select-btn button svg{width:16px;height:16px;flex:none}
.select-btn button:hover{color:var(--text-primary)}
.select-btn button.on{background:var(--bg-surface);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-1)}
.select-btn button[disabled]{opacity:.4;cursor:not-allowed}
.select-btn.outline{background:transparent;padding:0;gap:0;border:1px solid var(--border-strong);overflow:hidden}
.select-btn.outline button{border-radius:0;height:36px}
.select-btn.outline button+button{border-left:1px solid var(--border-strong)}
.select-btn.outline button.on{background:var(--accent-subtle);color:var(--accent-text);box-shadow:none}