Button - OLUN. Design System

변형: primary · outline · ghost · danger · emergency · subtle
핵심 토큰: accent-solid / accent-on-solid · focus-ring
접근성 기준: 아이콘 전용이 아니면 보이는 텍스트 라벨 필수

액션 중요도 구분

주요 / 보조 / 취소 / 위험 액션

primary

outline

ghost

danger

emergency

subtle

코드 보기tsx

import { Button } from "@olundot/ui";

export function ButtonVariants() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
      <Button variant="primary">저장</Button>
      <Button variant="outline">임시저장</Button>
      <Button variant="ghost">취소</Button>
      <Button variant="danger">삭제</Button>
      <Button variant="emergency">긴급 중단</Button>
      <Button variant="subtle">더보기</Button>
    </div>
  );
}

터치 영역과 밀도

xs ~ xl 크기 조절

xs 32

sm 34

md 38

lg 44

xl 48

코드 보기tsx

import { Button } from "@olundot/ui";

export function ButtonSizes() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px" }}>
      <Button size="xs" variant="outline">최소</Button>
      <Button size="sm" variant="outline">작음</Button>
      <Button size="md" variant="outline">기본</Button>
      <Button size="lg" variant="outline">큰</Button>
      <Button size="xl" variant="outline">최대</Button>
    </div>
  );
}

중복 제출 방지

primary와 outline의 disabled / loading

primary disabled

outline disabled

primary loading

outline loading

코드 보기tsx

import { Button } from "@olundot/ui";

export function ButtonStates() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
      <Button disabled>비활성화</Button>
      <Button variant="outline" disabled>비활성 보조</Button>
      <Button loading>저장 중…</Button>
      <Button variant="outline" loading>처리 중…</Button>
    </div>
  );
}