LogoCoUI

Badge

배지 컴포넌트

Badge#

상태, 카운트, 라벨을 표시하는 배지 컴포넌트입니다.

사용법#

// 기본 배지
CouiBadge(
  label: '신규',
)

// 변형
CouiBadge(
  label: '성공',
  variant: BadgeVariant.success,
)

// 카운트 배지
CouiBadge.count(
  count: 5,
)

// 위젯에 배지 부착
CouiBadge.attached(
  count: 3,
  child: Icon(Icons.notifications),
)
Badge(label: '신규')

Badge(label: '성공', variant: BadgeVariant.success)

Badge.count(count: 5)

Badge.attached(
  count: 3,
  child: Icon(Icons.notifications),
)

Props / Parameters#

속성타입기본값설명
labelString?null배지 텍스트
countint?null카운트 숫자
variant BadgeVariant default 배지 변형 스타일
sizeBadgeSizemd배지 크기
maxCountint99최대 표시 숫자
child Widget? null 배지를 부착할 위젯

변형 (Variants)#

스타일#

CouiBadge(label: '기본', variant: BadgeVariant.neutral)
CouiBadge(label: '정보', variant: BadgeVariant.info)
CouiBadge(label: '성공', variant: BadgeVariant.success)
CouiBadge(label: '경고', variant: BadgeVariant.warning)
CouiBadge(label: '오류', variant: BadgeVariant.error)

크기#

CouiBadge(label: 'SM', size: BadgeSize.sm)
CouiBadge(label: 'MD', size: BadgeSize.md)
CouiBadge(label: 'LG', size: BadgeSize.lg)

도트 배지#

CouiBadge.dot(
  variant: BadgeVariant.error,
  child: Icon(Icons.mail),
)