Borders (테두리)
iCignal의 테두리 시스템은 Foundation과 완전히 동일합니다.
Foundation 상속
iCignal은 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 } from "@vortex/ui-icignal";
export default function Example() {
return (
<div className="p-md bg-white border border-border-default rounded-lg shadow-md">
<h3 className="text-xl font-semibold text-text-primary mb-sm">
iCignal Card
</h3>
<p className="text-text-secondary mb-md">Card with iCignal branding</p>
<div className="flex gap-md">
<Button variant="primary">Primary (Blue)</Button>
<Button variant="secondary">Secondary (Green)</Button>
</div>
</div>
);
}다음 단계
Last updated on