---
title: "Page"
description: "Her ekranın dış çerçevesi: genişlik ön ayarı, başlık, geri gezinme, durum rozetleri ve aksiyonlar."
---

<Callout type="info" title="Ne zaman kullanılır">
Uygulamanın her rotasını tam olarak bir PageHeader içeren bir Page ile sarın.
</Callout>

## Kurulum

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

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

## Örnekler

### Liste sayfası başlığı

Başlık, kısa açıklama ve tek birincil aksiyon.

**Örnek: Liste sayfası başlığı** (`page/simple`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/page/simple?align=stretch)

```tsx
import { PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Page, PageHeader } from "@/components/ikas/page"

export default function PageSimple() {
  return (
    <Page width="full" className="p-0 sm:p-0">
      <PageHeader
        title="Kampanyalar"
        description="Ödeme adımında otomatik uygulanan indirimler."
        actions={
          <Button>
            <PlusIcon data-icon="inline-start" />
            Kampanya oluştur
          </Button>
        }
      />
    </Page>
  )
}
```

### Detay sayfası başlığı

`back` ile geri bağlantısı, `badges` içinde sipariş durumu ve pazaryeri iletimi, menüde toplanmış ikincil aksiyonlar.

**Örnek: Detay sayfası başlığı** (`page/header`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/page/header?align=stretch)

```tsx
import { MoreHorizontalIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Page, PageHeader } from "@/components/ikas/page"

export default function PageHeaderDemo() {
  return (
    <Page width="full" className="p-0 sm:p-0">
      <PageHeader
        back={{ label: "Siparişler", onClick: () => {} }}
        title="IK-1048"
        badges={
          <>
            <Badge status="warning" dot>
              Hazırlanıyor
            </Badge>
            <Badge variant="surface" status="success">
              Pazaryerine iletildi
            </Badge>
          </>
        }
        description="6 Ekim 2026, 12:24 · Pazaryeri A"
        actions={
          <>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="icon" aria-label="Diğer işlemler">
                  <MoreHorizontalIcon />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem>İrsaliye yazdır</DropdownMenuItem>
                <DropdownMenuItem>Kopyala</DropdownMenuItem>
                <DropdownMenuItem variant="destructive">Siparişi iptal et</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
            <Button variant="outline">Faturayı görüntüle</Button>
            <Button>Kargoya ver</Button>
          </>
        }
      />
    </Page>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Başlıkları kısa isimler olarak tutun: “Kampanyalar”, “IK-1048”.
- Ayarlar için width="narrow", tablolar için width="wide" kullanın.
- 3 ve daha fazla ikincil aksiyonu “Diğer aksiyonlar” menüsüne taşıyın.

**Yapmayın:**

- Başlığın üstüne hero alanı, illüstrasyon veya gradient eklemeyin.
- Başlıkta birden fazla birincil buton kullanmayın.

## API

### `Page`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `width` | `"narrow" \| "default" \| "wide" \| "full"` | `"default"` | narrow ayarlar için 768px, default 1024px, wide tablolar ve paneller için 1280px. |

### `PageHeader`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `title` (zorunlu) | `React.ReactNode` | - | Sayfa başlığı. Sayfadaki tek h1 olarak render edilir. |
| `description` | `React.ReactNode` | - | Başlığın altında tek satırlık bağlam. |
| `badges` | `React.ReactNode` | - | Başlığın yanındaki rozetler, örn. sipariş durumu. |
| `back` | `{ label?: string; onClick: () => void } \| { label?: string; href: string; asChild?: false } \| { label?: string; children: React.ReactElement; asChild: true }` | - | Geri butonu gösterir. next/link ile asChild kullanın. |
| `actions` | `React.ReactNode` | - | Sağa hizalı butonlar. Birincil aksiyon en sonda. |