Buttons

다양한 방식으로 사용되는 Button 컴포넌트 모음입니다.

FilledButton

가장 기본이 되는 버튼입니다. 배경 색상이 채워진 것이 특징입니다.

Preview

role - primary ( default )

role - assistive

role - negative

display - fill

Usage

설치

Terminal

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

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

기본 사용법

tsx

"use client";

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

export default function Example() {
  return (
    <FilledButton
      role="assistive"
      size="large"
      onClick={() => {}}
      buttonCustomStyle={{
        zIndex: 1
      }}
    />
  )
}

Props

Prop	Type	Default	Description
`role`	`"primary" \| "assistive" \| "negative"`	`"primary"`	버튼 기본 색상 설정
`size`	`"large" \| "medium" \| "small"`	`"medium"`	버튼 크기
`display`	`"inline" \| "fill"`	`"inline"`	버튼 너비 모드 (fill: flex 컨테이너에서 비율 분배)
`onClick`	`() => void`	`-`	클릭 이벤트 콜백
`buttonCustomStyle`	`CSSObject`	`{}`	커스텀 CSS

TextButton

배경 색상 없이 텍스트만 존재하는 버튼입니다.

Preview

Usage

설치

Terminal

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

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

기본 사용법

tsx

"use client";

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

export default function Example() {
  return (
    <TextButton
      size="large"
      onClick={() => {}}
      buttonCustomStyle={{
        zIndex: 1
      }}
    >
      Text
    </TextButton>
  )
}

Props

Prop	Type	Default	Description
`size`	`"large" \| "medium" \| "small"`	`"medium"`	버튼 크기
`onClick`	`() => void`	`() => {}`	클릭 이벤트 콜백
`buttonCustomStyle`	`CSSObject`	`{}`	커스텀 CSS

IconButton

아이콘만 표시되는 정사각형 버튼입니다.

Preview

Usage

tsx

"use client";

import { IconButton } from "@b1nd/dodam-design-system/components";
import { Heart } from "lucide-react";

export default function Example() {
  return (
    <IconButton
      icon={<Heart />}
      size={40}
      onClick={() => {}}
    />
  )
}

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	-	표시할 아이콘 컴포넌트
`size`	`number`	`40`	버튼 크기 (px)
`iconSize`	`number`	`size * 0.5`	아이콘 크기 (px)
`onClick`	`() => void`	-	클릭 이벤트 콜백
`disabled`	`boolean`	`false`	비활성화 여부
`customStyle`	`CSSObject`	`{}`	커스텀 CSS

SegmentedButton

페이지 분할 등으로 여러 데이터를 나눠 보여줄 때, 컨트롤 할 수 있게 하는 버튼입니다.

Preview

Usage

설치

Terminal

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

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

기본 사용법

tsx

"use client";

import { SegmentedButton, SegmentedButtonData } from "@b1nd/dodam-design-system/components"
import { useState } from "react"

export default function Example() {
  const [data, setData] = useState<SegmentedButtonData[]>([
    { text: "텍스트 1", isActive: true, value: "first" },
    { text: "텍스트 2", isActive: false, value: "second" },
    { text: "텍스트 3", isActive: false, value: "third" },
  ]);
  return (
    <SegmentedButton
      data={data}
      setData={setData}
      width="480px"
      onBlockClick={(value) => console.log(value)}
      containerCustomStyle={{
        zIndex: 1
      }}
      itemCustomStyle={{
        zIndex: 2
      }}
    />
  )
}

Props

Prop	Type	Description
`data`	`SegmentedButtonData[]`	state 표시
`setData`	`Dispatch<SetStateAction<SegmentedButtonData[]>>`	setState 함수
`onBlockClick`	`(value: string) => void`	내부 블록 클릭 시 이벤트 / value 전달
`width`	`string`	컨테이너 크기 / 기본값 400px
`containerCustomStyle`	`CSSObject`	컨테이너 커스텀 CSS
`itemCustomStyle`	`CSSObject`	아이템 커스텀 CSS

Type

interface - SegmentedButtonData[]

Prop	Type	Description
`text`	`string`	표시될 텍스트
`isActive`	`boolean`	활성 여부
`value`	`string`	다양하게 활용 가능한 값