Button
행동을 유도하거나 기능을 실행할 때 써요. 중요도와 맥락에 맞는 Variant 와 Size 를 골라요.
Anatomy
- 01기본 버튼아이콘 없이 레이블만 사용하는 기본 형태
- 02Right Icon아이콘이 오른쪽에 위치. 시각적 균형에 따라 좌우 여백 조정 가능
- 03Left Icon아이콘이 왼쪽에 위치. 시각적 균형에 따라 좌우 여백 조정 가능
Properties
Size
| Size | Height | Padding(좌우) | Font | Weight | Radius | Icon gap |
|---|---|---|---|---|---|---|
| 64 | 64px | 32px | 18px | 700 | 12px | 4px |
| 54 | 54px | 20px | 16px | 700 | 12px | 4px |
| 48 | 48px | 16px | 16px | 700 | 12px | 4px |
| 40 | 40px | 12px | 14px | 500 | 8px | 4px |
| 32 | 32px | 10px | 14px | 500 | 8px | 4px |
| 24 | 24px | 8px | 13px | 500 | 6px | 4px |
Variant
| Variant | 배경 | 텍스트 | 용도 |
|---|---|---|---|
| Primary | --color-accent-normal #1d7ff9 | --color-static-white #ffffff | 화면 내 가장 중요한 단일 액션 |
| AI | --color-ai-normal #6f3ad0 | --color-static-white #ffffff | AI 기능 진입·실행 전용 액션 |
| Sub | --color-format-word-hover #d9eaff | --color-accent-strong #1458ad | Primary와 쌍을 이루는 보조 액션 |
| Gray | --color-fill-normal #f2f4f6 | --color-label-normal #26282b | 중립적인 보조 액션 |
| Black | --color-action-normal #000000 | --color-label-inverse #ffffff | 다크 배경·강렬한 톤이 필요할 때 |
| Delete | --color-state-error #f95c5c | --color-static-white #ffffff | 되돌릴 수 없는 삭제 액션 |
| Ghost Variant | 텍스트 | 테두리 | 용도 |
|---|---|---|---|
| Ghost | --color-accent-normal #1d7ff9 | --color-line-neutral #e8ebed | UI 밀도를 낮추고 싶을 때 |
| Black Ghost | --color-label-normal #26282b | --color-line-neutral #e8ebed | 중립 톤 아웃라인 |
| Delete Ghost | --color-state-error #f95c5c | --color-line-neutral #e8ebed | 삭제 액션의 보조 짝 |
State
Disabled 는 투명도가 아니라 색을 바꿔요. 배경 --color-fill-strong, 텍스트 --color-label-assistive. 컴포넌트마다 Disabled 방식이 다른 건 의도예요.
Guidelines
Hierarchy
01
Primary
핵심 CTA 하나에만 써요. 한 화면에 하나예요. AI 는 AI 기능 전용, Black 은 다크 배경이나 강렬한 톤에 써요.
02
Secondary
Primary 와 짝을 이루는 보조 액션이에요. '더 알아보기'처럼 추가 선택지를 줄 때 쓰고, 단독으론 안 써요.
03
Tertiary
Primary 아래 위계의 보조 버튼이에요. 취소·이전·더보기처럼 필수는 아닌 액션에 써요. Gray 는 중립, Default 는 흰 배경 테두리예요.
04
Ghost
배경 없이 아웃라인만이에요. 무게를 낮춰 주요 액션에 시선을 모아요. Delete 계열은 삭제에만, 확인 팝업과 함께 써요.
버튼 조합
기본 조합 네 가지예요.
01
Primary + Sub
핵심 CTA 옆에 추가 선택지를 붙이는 기본 조합이에요.
02
Black + Gray
강렬한 톤이 필요한 화면에서 완료와 닫기를 짝지어요.
03
Ghost + Default
시선을 콘텐츠에 두고 싶을 때 동의와 취소를 나란히 제공해요.
04
Delete + Delete Ghost
되돌릴 수 없는 삭제 액션의 짝이에요. 반드시 확인 팝업과 함께 써요.
배치
Specification
Size
| Size | 용도 |
|---|---|
| 64 | 마케팅·프로모션 전용 |
| 54 | 히어로 영역 주요 CTA, 대형 액션 |
| 48 | 기본 UI 액션 (권장) |
| 40 | 컴팩트 레이아웃, 필터, 검색 |
| 32 | 인라인 액션, 태그 영역 |
| 24 | 테이블, 뱃지 내부 등 초소형 |
Token
| Token | 값 | 용도 |
|---|---|---|
--color-accent-normal | #1d7ff9 | Primary 배경, Ghost 텍스트 |
--color-accent-strong | #1458ad | Primary hover, Sub 텍스트 |
--color-label-neutral | #454c53 | Default·Gray hover 텍스트 |
--color-ai-normal | #6f3ad0 | AI 배경 |
--color-fill-normal | #f2f4f6 | Gray 배경 |
--color-fill-strong | #e8ebed | Disabled 배경 |
--color-label-assistive | #9ea4aa | Disabled 텍스트 |
--color-state-error | #f95c5c | Delete 배경 |
--color-line-neutral | #e8ebed | Ghost 계열·Disabled 테두리 |
설치
npm i @polarisoffice/pds-reactSolid
배경이 채워진 기본 형태예요. 화면 내 가장 중요한 단일 액션에만 Primary 를 써요.
import { Button } from '@polarisoffice/pds-react';
<Button variant="primary">Primary</Button>
<Button variant="ai">AI</Button>
<Button variant="sub">Sub</Button>
<Button variant="gray">Gray</Button>
<Button variant="black">Black</Button>
<Button variant="delete">Delete</Button>Ghost
배경 없이 아웃라인만 있는 형태예요. 시선을 콘텐츠에 집중시키고 싶을 때 써요.
import { Button } from '@polarisoffice/pds-react';
<Button variant="ghost">Ghost</Button>
<Button variant="blackGhost">Black Ghost</Button>
<Button variant="deleteGhost">Delete Ghost</Button>Default
흰 배경에 테두리가 있는 기본 버튼이에요. Ghost 와 달리 배경을 칠하고 hover 색이 있어요.
import { Button } from '@polarisoffice/pds-react';
<Button variant="default">버튼</Button>Size
64 · 54 · 48 · 40 · 32 · 24 여섯 단계. 기본 UI 액션은 48 을 권장해요.
import { Button } from '@polarisoffice/pds-react';
<Button size={64}>버튼 레이블</Button>
<Button size={54}>버튼 레이블</Button>
<Button size={48}>버튼 레이블</Button>
<Button size={40}>버튼 레이블</Button>
<Button size={32}>버튼 레이블</Button>
<Button size={24}>버튼 레이블</Button>Icon
아이콘은 좌우 어느 쪽에도 놓을 수 있어요. 시각적 균형에 따라 좌우 여백을 조정해요.
import { Button } from '@polarisoffice/pds-react';
// 해당 아이콘은 임시 아이콘이라 교체해서 써야 해요.
import { DownloadIcon } from '@polarisoffice/pds-react';
<Button variant="primary" rightIcon={<DownloadIcon />}>버튼</Button>
<Button variant="primary" leftIcon={<DownloadIcon />}>버튼</Button>Disabled
Disabled 는 투명도가 아니라 색을 바꿔요.
import { Button } from '@polarisoffice/pds-react';
<Button variant="primary" disabled>버튼</Button>