Badges

숫자를 뱃지로 표시 / 강조하는 컴포넌트 모음입니다.

Dot Badge

점으로 특정 요소를 강조 가능합니다.

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 { colors } from "@b1nd/dodam-design-system/colors"
import { Dot } from "@b1nd/dodam-design-system/components";

export default function Example() {
  return (
    <Dot 
      size={12} 
      backgroundColor={colors.status.success} 
      dotCustomStyle={{ 
        zIndex: 1 
      }}
    />
  );
}

Props

Prop	Type	Default	Description
`size`	`number`	`8`	너비 및 높이
`backgroundColor`	`string`	`#FF4242`	dds 내부 색상 사용 권장
`dotCustomStyle`	`CSSObject`	`{}`	커스텀 스타일

Badge

일반적인 뱃지로, 숫자 표시합니다.

Preview

999+

Usage

기본 사용법

tsx

"use client"

import { colors } from "@b1nd/dodam-design-system/colors";
import { Badge } from "@b1nd/dodam-design-system/components";
import { useState } from "react";

export default function Example() {
  const [number, setNumber] = useState(1); 
  return (
    <Badge 
      number={number} 
      maxNumber={999} 
      backgroundColor={colors.status.success} 
      badgeCustomStyle={{ 
  	    zIndex: 1 
      }} 
    /> 
  );
}

Props

Prop	Type	Default	Description
`number`	`number`	`-`	표시될 숫자
`maxNumber`	`number`	`999`	표시될 숫자의 최대치 (초과 시 + 로 표시)
`backgroundColor`	`string`	`#FF4242`	dds 내부 색상 사용 권장
`badgeCustomStyle`	`CSSObject`	`{}`	커스텀 스타일