Badge

Badge

뱃지, 알약(pill), 태그를 표시하는 컴포넌트예요. 다형성(polymorphic) 컴포넌트로, 라벨·태그·상태 정보를 컴팩트하게 보여줄 때 사용해요.

출처: 문서

본문

Usage

게시판, 태그, 알약과 같은 짧은 콘텐츠를 표시해요.

import { Badge } from '@mantine/core';

function Demo() {
  return <Badge>Badge</Badge>;
}

Gradient variant

variant prop이 gradient이면 gradient prop으로 그라디언트를 제어할 수 있어요. gradient prop은 from, to, deg 속성을 가진 객체를 받아요. gradient prop이 설정되지 않으면 Badge는 theme object에서 설정할 수 있는 theme.defaultGradient을 사용해요. variant가 gradient가 아니면 gradient prop은 무시돼요.

variant="gradient"은 두 가지 색상의 선형 그라디언트만 지원해요. 더 복잡한 그라디언트가 필요하면 Styles API로 Badge 스타일을 수정하세요.

Rounded

circle prop을 설정하면 가로 패딩을 줄이고 뱃지 너비를 높이와 같게 만들어요.

Left and right sections

왼쪽/오른쪽 섹션에 아이콘 등 요소를 추가할 수 있어요.

Full width

fullWidth를 설정하면 뱃지가 부모 요소의 전체 너비로 늘어나요.

Customize variant colors

Badge와 다른 컴포넌트 배리언트의 색은 variantColorResolver를 테마에 추가해 커스터마이즈할 수 있어요.

import { ImageIcon, FingerprintIcon, WarningIcon } from '@phosphor-icons/react';
import {
  Badge,
  Group,
  MantineProvider,
  defaultVariantColorsResolver,
  VariantColorsResolver,
  parseThemeColor,
  rgba,
  darken,
} from '@mantine/core';

const variantColorResolver: VariantColorsResolver = (input) => {
  const defaultResolvedColors = defaultVariantColorsResolver(input);
  const parsedColor = parseThemeColor({
    color: input.color || input.theme.primaryColor,
    theme: input.theme,
  });

  // Override some properties for variant
  if (parsedColor.isThemeColor && parsedColor.color === 'lime' && input.variant === 'filled') {
    return {
      ...defaultResolvedColors,
      color: 'var(--mantine-color-black)',
      hoverColor: 'var(--mantine-color-black)',
    };
  }

  // Completely override variant
  if (input.variant === 'light') {
    return {
      background: rgba(parsedColor.value, 0.1),
      hover: rgba(parsedColor.value, 0.15),
      border: `1px solid ${parsedColor.value}`,
      color: darken(parsedColor.value, 0.1),
    };
  }

  // Add new variants support
  if (input.variant === 'danger') {
    return {
      background: 'var(--mantine-color-red-9)',
      hover: 'var(--mantine-color-red-8)',
      color: 'var(--mantine-color-white)',
      border: 'none',
    };
  }

  return defaultResolvedColors;
};

function Demo() {
  return (
    <MantineProvider theme={{ variantColorResolver }}>
      <Group>
        <Badge variant="filled" color="lime">Lime filled</Badge>
        <Badge variant="light" color="orange">Orange light</Badge>
        <Badge variant="danger">Danger</Badge>
      </Group>
    </MantineProvider>
  );
}

autoContrast

Badge는 autoContrast prop과 theme.autoContrast를 지원해요. Badge나 테마에 autoContrast가 설정되면 color prop에 지정된 값과 충분한 대비를 이루도록 콘텐츠 색이 조정돼요.

autoContrast 기능은 color prop으로 배경색을 바꿀 때만 동작해요. autoContrast는 filled 배리언트에서만 동작해요.

Styles API

Badge는 Styles API를 지원해요. classNames prop으로 컴포넌트의 어떤 내부 요소든 스타일을 추가할 수 있어요.

Polymorphic component

Badge는 다형성 컴포넌트예요. 기본 루트 요소는 div이지만 component prop으로 다른 요소나 컴포넌트로 바꿀 수 있어요.

import { Badge } from '@mantine/core';

function Demo() {
  return <Badge component="a" href="/">Badge as link</Badge>;
}

component prop에 컴포넌트도 사용할 수 있어요. 예를 들어 Next.js Link:

import Link from 'next/link';
import { Badge } from '@mantine/core';

function Demo() {
  return <Badge component={Link} href="/">Badge as link</Badge>;
}

Polymorphic components with TypeScript

다형성 컴포넌트의 prop 타입은 일반 컴포넌트와 달라요. 기본 요소의 HTML 요소 props를 확장하지 않아요. 예를 들어 div가 기본 요소임에도 BadgeProps는 React.ComponentProps<'div'>를 확장하지 않아요.

다형성이 아닌 래퍼를 만들려면 컴포넌트 props 인터페이스가 HTML 요소 props를 확장해야 해요. 예를 들어:

import type { BadgeProps, ElementProps } from '@mantine/core';

interface MyBadgeProps extends BadgeProps,
  ElementProps<'div'> {}

래핑 후에도 다형성을 유지하려면 이 가이드의 polymorphic 함수를 사용하세요.

더 알아보기 (Learn more)

• BackgroundImage
• Card