Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Badge

표시되는 데이터의 개수를 표시하는 배지 컴포넌트입니다.

import { Badge } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

알림, 카운트, 표시 등 데이터의 개수를 표시할 때

사용예제

Basic Usage

기본적인 사용방법입니다.

circle

square

rounded

Shape

뱃지의 모양을 설정할 수 있습니다.

import React, { useState } from 'react';
import { Badge, Avatar, Radio, Card } from 'sud-ui';

const ShapeBadge = () => {
  const [shape, setShape] = useState('circle');

  const shapeOptions = [
    { label: 'circle', value: 'circle' },
    { label: 'square', value: 'square' },
    { label: 'rounded', value: 'rounded' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={shapeOptions}
            direction="horizontal"
            value={shape}
            onChange={setShape}
          />
        </div>
      </Card>
      <div>
        <Badge count={10} shape={shape}>
          <Avatar />
        </Badge>
      </div>
    </div>
  );
};

export default ShapeBadge;

Show Zero

count가 0일 때도 표시

Position

배지의 위치를 설정할 수 있습니다.

import React from 'react';
import { Badge, Avatar } from 'sud-ui';

const PositionBadge = () => {
  return (
    <div className="flex gap-[20px] flex-wrap">
      <Badge position="top-right" count={5}>
        <Avatar />
      </Badge>
      <Badge position="top-left" count={3}>
        <Avatar />
      </Badge>
      <Badge position="bottom-right" count={7}>
        <Avatar />
      </Badge>
      <Badge position="bottom-left" count={2}>
        <Avatar />
      </Badge>
    </div>
  );
};

export default PositionBadge;

Color Custom

배지의 배경색과 텍스트 색상을 직접 설정할 수 있습니다.

import React from 'react';
import { Badge, Avatar } from 'sud-ui';

const ColorCustomBadge = () => {
  return (
    <div className="flex gap-[20px] flex-wrap">
      <Badge count={5} background="ocean-5" color="white-10">
        <Avatar />
      </Badge>
      <Badge count={5} background="forest-5" color="white-10">
        <Avatar />
      </Badge>
      <Badge count={5} background="volcano-5" color="white-10">
        <Avatar />
      </Badge>
    </div>
  );
};

export default ColorCustomBadge;

Shadow

배지의 그림자를 설정할 수 있습니다.

import React from 'react';
import { Badge, Avatar } from 'sud-ui';

const ShadowBadge = () => {
  return (
    <div className="flex gap-[20px] flex-wrap">
      <Badge shadow="sm" count={5}>
        <Avatar />
      </Badge>
      <Badge shadow="md" count={5}>
        <Avatar />
      </Badge>
      <Badge shadow="lg" count={5}>
        <Avatar />
      </Badge>
    </div>
  );
};

export default ShadowBadge;

Size

배지의 크기를 설정할 수 있습니다.

import React, { useState } from 'react';
import { Badge, Avatar, Radio, Card, Input, Typography } from 'sud-ui';

const SizeBadge = () => {
  const [size, setSize] = useState('sm');
  const [sizeNumber, setSizeNumber] = useState(20);

  const sizeOptions = [
    { label: 'xs', value: 'xs' },
    { label: 'sm', value: 'sm' },
    { label: 'md', value: 'md' },
    { label: 'lg', value: 'lg' },
    { label: 'xl', value: 'xl' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex flex-col items-center justify-center gap-[20px]">
          <Radio.Group
            options={sizeOptions}
            direction="horizontal"
            value={size}
            onChange={setSize}
          />
          <Input
            value={sizeNumber}
            size="sm"
            type="number"
            onChange={(e) => setSizeNumber(Number(e.target.value) || 0)}
            placeholder="숫자로 입력"
          />
        </div>
      </Card>
      <div className="flex gap-[10px]">
        <Card style={{ width: "100%" }} shadow="none">
          <div className="flex flex-col items-center justify-center gap-[10px]">
            <Badge count={size} size={size}>
              <Avatar />
            </Badge>
            <Typography>size Map</Typography>
          </div>
        </Card>
        <Card style={{ width: "100%" }} shadow="none">
          <div className="flex flex-col items-center justify-center gap-[10px]">
            <Badge count={sizeNumber} size={sizeNumber}>
              <Avatar />
            </Badge>
            <Typography>size Number</Typography>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default SizeBadge;

Label Mode

라벨 모드를 활성화할 수 있습니다.

Color Type

배지의 색상 타입을 설정할 수 있습니다.

0에 가까울수록 부모 요소에 가까움

Offset Ratio

배지의 위치 오프셋 비율을 설정할 수 있습니다.

import React from 'react';
import { Badge, Avatar, Typography } from 'sud-ui';

const OffsetRatioBadge = () => {
  return (
    <div className="flex flex-col gap-[20px]">
      <div className="flex gap-[20px] flex-wrap">
        <Badge offsetRatio={0} count={5}>
          <Avatar />
        </Badge>
        <Badge offsetRatio={0.25} count={3}>
          <Avatar />
        </Badge>
        <Badge offsetRatio={0.5} count={7}>
          <Avatar />
        </Badge>
        <Badge offsetRatio={0.75} count={2}>
          <Avatar />
        </Badge>
      </div>
      <Typography size="sm">
        0에 가까울수록 부모 요소에 가까움
      </Typography>
    </div>
  );
};

export default OffsetRatioBadge;

Border

배지의 테두리 스타일을 설정할 수 있습니다.

import React from 'react';
import { Badge, Avatar } from 'sud-ui';

const BorderBadge = () => {
  return (
    <div className="flex gap-[20px] flex-wrap">
      <Badge border borderType="solid" borderColor="blue-5" count={3}>
        <Avatar />
      </Badge>
      <Badge border borderType="dashed" borderWeight={2} borderColor="red-5" count={7}>
        <Avatar />
      </Badge>
      <Badge border borderType="dotted" borderWeight={3} borderColor="green-5" count={5}>
        <Avatar />
      </Badge>
    </div>
  );
};

export default BorderBadge;

10+

Max

최대 표시 숫자를 설정할 수 있습니다.

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

count

표시할 숫자 또는 컨텐츠 (ReactNode)

ReactNode

max

최대 표시 숫자 (초과시 max+ 표시)

number

dot

숫자 대신 점으로 표시

boolean

false

showZero

count가 0일 때도 표시

boolean

false

position

배지의 위치

top-right

top-left

bottom-right

bottom-left

top-right

size

배지의 크기

or number

offsetRatio

배지의 위치 오프셋 비율 (0~1 사이의 값, 0에 가까울수록 부모 요소에 가까움)

number

0.25

label

라벨 모드 활성화

boolean

false

shape

배지의 모양

circle

square

rounded

circle

colorType

배지의 색상 타입

default

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

red

background

배경색(palette값 또는 HEX code)

string

color

텍스트 색상(palette값 또는 HEX code)

string

border

테두리 표시 여부

boolean

false

borderColor

테두리 색상(palette값 또는 HEX code)

string

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께 (px)

number

shadow

그림자 크기

none

children

뱃지가 감쌀 자식 요소

ReactNode

className

추가 클래스명

string

style

추가 스타일

React.CSSProperties

{}

aria-label

접근성 레이블

string

개인정보 처리방침

서비스 약관