Skip to Content
FoundationsCalsBorders (테두리)

Borders (테두리)

Cals의 테두리 시스템은 Foundation과 완전히 동일합니다.

Foundation 상속

Cals는 Foundation의 Border Radius와 Border Width 토큰을 모두 상속합니다.

Border Radius

토큰크기사용 사례Tailwind Class
sm4pxInput, Tag, Badgerounded-sm
md8pxButton, Card (기본)rounded-md
lg12pxModal, Dialogrounded-lg
xl16pxHero Image, Feature Cardrounded-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