Motile UI

Badge

작은 텍스트나 상태를 표시하는 뱃지 컴포넌트입니다. primary, secondary, outlined, dot, shimmer 5가지 스타일과 large, medium, small 3가지 크기를 제공합니다. color 속성으로 원하는 색상을 자유롭게 지정할 수 있습니다.

미리보기

새 소식

사용법

1"use client";
2
3import { Badge } from "motile-ui";
4
5export default function PreviewExample() {
6  return <Badge variant="primary">새 소식</Badge>;
7}

API 레퍼런스

Badge

뱃지 컴포넌트

속성타입기본값설명
variant"primary" | "secondary" | "outlined" | "dot" | "shimmer""primary"뱃지 스타일
size"large" | "medium" | "small""medium"뱃지 크기
colorstring-커스텀 배경색 (CSS 색상 값)
childrenReactNode-뱃지 내용

기본 <code>span</code> HTML 속성을 모두 사용할 수 있습니다.

예제

스타일 (Variants)

PrimarySecondaryOutlinedDotShimmer
1"use client";
2
3import { Badge } from "motile-ui";
4
5export default function VariantsExample() {
6  return (
7    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
8      <Badge variant="primary">Primary</Badge>
9      <Badge variant="secondary">Secondary</Badge>
10      <Badge variant="outlined">Outlined</Badge>
11      <Badge variant="dot">Dot</Badge>
12      <Badge variant="shimmer">Shimmer</Badge>
13    </div>
14  );
15}

크기 (Sizes)

LargeMediumSmall
1"use client";
2
3import { Badge } from "motile-ui";
4
5export default function SizesExample() {
6  return (
7    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
8      <Badge size="large">Large</Badge>
9      <Badge size="medium">Medium</Badge>
10      <Badge size="small">Small</Badge>
11    </div>
12  );
13}

커스텀 색상

GreenBlueOrangeRedPurple
1"use client";
2
3import { Badge } from "motile-ui";
4
5export default function ColorsExample() {
6  return (
7    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
8      <Badge color="#10b981">Green</Badge>
9      <Badge color="#3b82f6">Blue</Badge>
10      <Badge color="#f59e0b">Orange</Badge>
11      <Badge color="#ef4444">Red</Badge>
12      <Badge color="#8b5cf6">Purple</Badge>
13    </div>
14  );
15}

Dot 타입

새로운 알림
1"use client";
2
3import { Badge } from "motile-ui";
4
5export default function DotExample() {
6  return <Badge variant="dot">새로운 알림</Badge>;
7}

조합

Large + SecondarySmall + OutlinedShimmer + Pink
1"use client";
2
3import { Badge } from "motile-ui";
4
5export default function CombinationsExample() {
6  return (
7    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
8      <Badge variant="secondary" size="large">
9        Large + Secondary
10      </Badge>
11      <Badge variant="outlined" size="small">
12        Small + Outlined
13      </Badge>
14      <Badge variant="shimmer" color="#ec4899">
15        Shimmer + Pink
16      </Badge>
17    </div>
18  );
19}
Badge | Motile UI