UI Guide

버튼과 폼 요소 한눈에 보기

이 페이지는 현재 프로젝트에서 실제로 쓰는 공용 UI 컴포넌트의 버튼, 입력, 셀렉트, 체크박스, 스위치, 텍스트에어리어를 비교하기 위한 샘플입니다. 색상은 theme.css의 토큰만 사용합니다.

정적 안내

Buttons

버튼

실제 `x-ui.button`의 변형에 맞춘 샘플입니다.

Primary / Secondary / Accent / Danger

Primary

Secondary

Accent

Danger

<x-ui.button variant="primary">Primary</x-ui.button>
<x-ui.button variant="secondary">Secondary</x-ui.button>
<x-ui.button variant="accent">Accent</x-ui.button>
<x-ui.button variant="danger">Danger</x-ui.button>

Outline / Soft / Ghost

Outline

Soft

Ghost

Disabled

<x-ui.button variant="outline">Outline</x-ui.button>
<x-ui.button variant="soft">Soft</x-ui.button>
<x-ui.button variant="ghost">Ghost</x-ui.button>

Sizes

Icon Only

⌕

Full Width

전체 너비 버튼

Fields

입력 요소

`x-ui.input`, `x-ui.select`, `x-ui.textarea`를 그대로 비교할 수 있습니다.

Inputs

Select / Textarea

짧은 소개 문구를 넣어봅니다.

Code

<x-ui.input floating id="name" name="name" label="이름" />
<x-ui.input type="email" id="email" name="email" label="이메일" />
<x-ui.select id="role" name="role" label="역할">...</x-ui.select>
<x-ui.textarea floating id="bio" name="bio" label="소개">...</x-ui.textarea>

Toggles

체크박스 / 스위치

폼 상태를 한 번에 비교하기 좋은 보조 요소입니다.

Checkbox

이메일 알림 받기

프로필 공개

Switch

활성화

비활성화

Tokens

색상 토큰

현재 프로젝트에서 권장하는 배경과 텍스트 토큰입니다.

bg-base

--color-bg-base-rgb

bg-surface

--color-bg-surface-rgb

bg-card

--color-bg-card-rgb

c-primary

--color-primary-rgb

Background Utilities

배경 유틸리티

`theme.css`의 `BACKGROUND UTILITIES`를 실제 카드로 비교합니다.

bg-base

.bg-base

bg-surface

.bg-surface

bg-surface1

.bg-surface1

bg-surface2

.bg-surface2

bg-card

.bg-card

bg-primary-soft

.bg-primary-soft