Badge - React
Badge
import { Badge } from '@idds/react';Contoh Penggunaan
Section titled “Contoh Penggunaan”Contoh 1
Section titled “Contoh 1”BrandInfoWarningSuccessErrorNeutral
BrandInfoWarningSuccessErrorNeutral
Contoh 2
Section titled “Contoh 2”SmallMedium
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
type? | 'soft' | 'fill' | 'soft' | No | Tipe style badge: soft (background level 100, text level 500) atau fill (background level 500, text level 100). |
variant? | 'brand' | 'info' | 'warning' | 'success' | 'error' | 'neutral' | 'info' | No | Variant warna badge: brand (primary), info (biru/Guide), warning (oranye/Warning), success (hijau/Positive), error (merah/Negative), neutral (abu-abu/Neutral). |
size? | 'sm' | 'md' | 'lg' | 'xl' | 'md' | No | Ukuran badge: sm (font-size 10px), md (font-size 12px, padding horizontal 8px), lg (font-size 14px, padding horizontal 12px), xl (font-size 16px). |
rounded? | 'sm' | 'md' | 'lg' | 'full' | 'full' | No | Border radius badge: sm, md, lg, atau full (pill, default). |
prefixIcon? | ReactNode | — | No | Icon di depan teks. |
suffixIcon? | ReactNode | — | No | Icon di belakang teks. |
children | ReactNode | — | Yes | Isi teks/nodes di dalam badge. |
className? | string | '' | No | ClassName tambahan bila diperlukan. |