nili/ui
enfaartr
Tüm bileşenler

Badge

Genel görünüm
15 export6 varyant ekseni17 prop5 dosya
import { Badge, StatusBadge } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Görünümler

Dört işleyiş. Adı style değil appearance — style React’in kendi prop’u ve onu almak satır içi stili olanaksız kılardı.

filledlightlighterstroke
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge appearance="filled">Filled</Badge>
      <Badge appearance="light">Light</Badge>
      <Badge appearance="lighter">Lighter</Badge>
      <Badge appearance="stroke">Stroke</Badge>
    </>
  )
}

Renkler

On renk, her görünümle serbestçe birleşir. Renk süstür — anlamı etikete koyun.

filled
grayblueorangeredgreenyellowpurpleskypinkteal
light
grayblueorangeredgreenyellowpurpleskypinkteal
lighter
grayblueorangeredgreenyellowpurpleskypinkteal
stroke
grayblueorangeredgreenyellowpurpleskypinkteal
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge color="gray">Gray</Badge>
      <Badge color="blue">Blue</Badge>
      <Badge color="green">Green</Badge>
      <Badge color="red">Red</Badge>
    </>
  )
}

Boyutlar

medium (20px) ve small (16px).

MediumSmallMediumSmall
import { Badge } from "@nili/ui"

export function Example() {
  return (
    <>
      <Badge size="medium">Medium</Badge>
      <Badge size="small">Small</Badge>
    </>
  )
}

Nokta, simgeler ve sayılar

dot başa bir nokta koyar; startIcon ve endIcon her düğümü alır. Çıplak bir sayı da yalnızca children’dır — ayrı bir sayaç prop’u yoktur.

EtkinYeni12%2Devre dışı
import { Badge, Icon } from "@nili/ui"
import { RiSparkling2Line, RiArrowUpLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Badge color="green" appearance="light" dot>
        Active
      </Badge>
      <Badge color="purple" startIcon={<Icon icon={RiSparkling2Line} />}>
        New
      </Badge>
      <Badge color="green" endIcon={<Icon icon={RiArrowUpLine} />}>
        12%
      </Badge>
      <Badge color="red">2</Badge>
    </>
  )
}

Durum rozeti

Ayrı bir bileşen, çünkü renk durumdan gelir: “Completed” rozeti yanlışlıkla kırmızı çizilemez. stroke ya da light, simgeyle veya noktayla.

stroke
completedpendingfaileddisabled
light
completedpendingfaileddisabled
noktalı
completedpendingfaileddisabled
import { StatusBadge } from "@nili/ui"

export function Example() {
  return (
    <>
      <StatusBadge status="completed">Completed</StatusBadge>
      <StatusBadge status="pending" appearance="light">Pending</StatusBadge>
      <StatusBadge status="failed" dot>Failed</StatusBadge>
      <StatusBadge status="disabled" icon={false}>Disabled</StatusBadge>
    </>
  )
}