Borders (테두리)
Cals의 테두리 시스템은 Foundation과 완전히 동일합니다.
Foundation 상속
Cals는 Foundation의 Border Radius와 Border Width 토큰을 모두 상속합니다.
Border Radius
| 토큰 | 크기 | 사용 사례 | Tailwind Class |
|---|---|---|---|
| sm | 4px | Input, Tag, Badge | rounded-sm |
| md | 8px | Button, Card (기본) | rounded-md |
| lg | 12px | Modal, Dialog | rounded-lg |
| xl | 16px | Hero Image, Feature Card | rounded-xl |
실전 예제
import { Button, Badge } from "@vortex/ui-cals";
export default function Example() {
return (
<div className="p-md bg-white border border-gray-200 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-sm">예약 정보</h3>
<div className="flex gap-sm mb-md">
<Badge variant="booking-confirmed">예약 확정</Badge>
<Badge variant="booking-completed">예약 완료</Badge>
</div>
<Button variant="primary">예약 관리</Button>
</div>
);
}다음 단계
Last updated on