---
title: "Meter"
description: "Bir limite göre kullanım. Dolgu ve iz aynı rengin iki tonudur; uyarı ve kritik durumlar ikon ve metinle gelir."
---

<Callout type="info" title="Ne zaman kullanılır">
Plan limitleri, API kotası, depolama. Tek bir işin ilerlemesi için RadialMeter.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/meter
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Plan limitleri

status="auto": %75'te warning, %90'da danger.

**Örnek: Plan limitleri** (`meter/limits`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/meter/limits)

```tsx
import { Meter } from "@/components/ikas/meter"

export default function MeterLimits() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Meter label="Aylık sipariş" value={1240} max={5000} />
      <Meter label="Ürün" value={4180} max={5000} />
      <Meter label="API kullanımı" value={9820} max={10000} />
    </div>
  )
}
```

### RadialMeter

Halka stroke-dashoffset ile dolar, yüzde yön duyarlı döner. İlerlet'e basın.

**Örnek: RadialMeter** (`meter/radial`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/meter/radial)

```tsx
import * as React from "react"
import { RotateCcwIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { RadialMeter } from "@/components/ikas/meter"

export default function MeterRadial() {
  const [synced, setSynced] = React.useState(72)

  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex flex-wrap items-end justify-center gap-10">
        <RadialMeter value={synced} label={synced >= 100 ? "Senkronizasyon tamamlandı" : "Ürünler senkronize ediliyor"} status={synced >= 100 ? "success" : "neutral"} size={112} />
        <RadialMeter value={38} label="Görsel optimizasyonu" size={80} strokeWidth={6} />
        <RadialMeter value={94} label="Depolama" status="auto" size={80} strokeWidth={6} />
      </div>
      <div className="flex gap-2">
        <Button size="sm" variant="outline" onClick={() => setSynced((v) => Math.max(0, v - 15))}>
          <RotateCcwIcon data-icon="inline-start" data-anim="spin" />
          Geri al
        </Button>
        <Button size="sm" onClick={() => setSynced((v) => Math.min(100, v + 12))}>
          İlerlet
        </Button>
      </div>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Limit metnini her zaman yazın: “8.420 / 10.000”.
- danger durumunda ne yapılacağını yanına bir aksiyonla verin.

**Yapmayın:**

- Yüzdeyi yalnızca renkle anlatmayın.
- Meter'ı süs olarak, limiti olmayan sayılar için kullanmayın.

## API

### `Meter`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `value` (zorunlu) | `number` | - | Kullanılan ve limit. |
| `max` (zorunlu) | `number` | - | Kullanılan ve limit. |
| `label` (zorunlu) | `React.ReactNode` | - | Ne ölçüldüğü. |
| `status` | `MeterStatus \| "auto"` | `"auto"` | auto eşiklere göre seçer. |
| `valueFormat` | `(value: number) => string` | `defaultNumberFormat` | “8.420 / 10.000” satırı için. |
| `size` | `"sm" \| "default"` | `"default"` | 6 / 8px kalınlık. |
| `className` | `string` | - |  |

### `RadialMeter`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `value` (zorunlu) | `number` | - | İlerleme. |
| `max` | `number` | `100` | İlerleme. |
| `label` | `React.ReactNode` | - | Halkanın altındaki açıklama. |
| `status` | `MeterStatus \| "auto"` | `"neutral"` | İlerleme için genelde neutral; tamamlanınca success. |
| `size` | `number` | `96` | Çap ve halka kalınlığı (px). |
| `strokeWidth` | `number` | `8` | Çap ve halka kalınlığı (px). |
| `className` | `string` | - |  |