ComponentName

컴포넌트에 대한 간단한 설명을 작성합니다. 이 컴포넌트가 어떤 역할을 하고, 언제 사용하면 좋은지 1-2문장으로 설명해주세요.

Preview

Button

Disabled

Usage

설치

Terminal

$ pnpm add @b1nd/dodam-design-system/components

@b1nd/dodam-design-system/components 패키지는 @dds-web의 iconography, typography, colors, shapes, themes 패키지에 의존합니다. 프로젝트에 해당 패키지들이 설치되어 있지 않다면, 함께 설치해주세요.

기본 사용법

tsx

import { ComponentName } from "@b1nd/dodam-design-system/components";

export default function Example() {
	return <ComponentName>Hello World</ComponentName>;
}

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "outline"`	`"primary"`	컴포넌트의 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	컴포넌트의 크기
`disabled`	`boolean`	`false`	비활성화 여부
`children`	`ReactNode`	`-`	컴포넌트 내부 콘텐츠

Variants

Primary

기본 스타일입니다. 주요 액션에 사용합니다.

tsx

<ComponentName variant="primary">Primary</ComponentName>

Primary

Secondary

보조 액션에 사용합니다.

tsx

<ComponentName variant="secondary">Secondary</ComponentName>

Secondary

Outline

테두리만 있는 스타일입니다.

tsx

<ComponentName variant="outline">Outline</ComponentName>

Outline

Sizes

Small

Medium

Large

tsx

<ComponentName size="sm">Small</ComponentName>
<ComponentName size="md">Medium</ComponentName>
<ComponentName size="lg">Large</ComponentName>

Accessibility

키보드 포커스 시 시각적 표시가 나타납니다
disabled 상태에서는 포커스를 받지 않습니다
스크린 리더에서 올바르게 읽힙니다