File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-14
08-14
File name
Commit message
Commit date
"use client";
import type { ReactNode } from "react";
import { cx } from "../../utils";
export type FoxBadgeColor =
| "neutral"
| "primary"
| "secondary"
| "accent"
| "danger"
| "warning"
| "success"
| "information"
| "disabled";
export type FoxBadgeType = "outline" | "solid" | "pastel";
export type FoxBadgeSize = "lg" | "md" | "sm";
export interface FoxBadgeProps {
children: ReactNode;
color?: FoxBadgeColor;
/** `outline`은 테두리만, `solid`는 색을 채우고, `pastel`은 옅게 깐다. */
type?: FoxBadgeType;
size?: FoxBadgeSize;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. 모양이 달라야 하면 여기 말고 `color`·`type`을 쓴다. */
className?: string;
}
/**
* @fox 배지. 상태를 갖지 않는 표시용 조각이라 누를 수 없다.
*
* 색 9종 × 계열 3종 × 크기 3종이 모두 시안에 있다. `disabled`는 잠긴 상태가 아니라
* 색 이름이다 — 배지는 누를 것이 없어 상태가 없고, 시안도 색 축에 두었다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxBadge({
children,
color = "neutral",
type = "outline",
size = "lg",
hidden = false,
className,
}: FoxBadgeProps) {
if (hidden) {
return null;
}
return (
<span
className={cx(
"fox-badge",
`fox-badge--${color}`,
`fox-badge--${type}`,
`fox-badge--${size}`,
className
)}
>
{children}
</span>
);
}