ResultState

Ne zaman kullanılır

ResultState, çok adımlı bir akışın ya da uzun bir görevin sonunda sonucu açıkça göstermek içindir: başvurunun alındığı, işlemin tamamlanamadığı, bir incelemenin sürdüğü.

Ne zaman kullanılmaz

• Kısa bir işlemin sonucu için: Toast kullanın.
• İçerik henüz yoksa: EmptyState kullanın.
• Sayfadaki bir hata için: InlineAlert kullanın.

Anatomi

Başarılı: Başvurunuz alındı

Sonucu iki iş günü içinde e-postayla bildireceğiz.

Başvuru numarası: 2026-0142

Ana sayfaya dön

AçıkKoyu

Kodu kopyala

import { Button, ResultState } from '@bigbang/ui';

export default function Default() {
  return (
    <ResultState tone="success" headingLevel={2} title="Başvurunuz alındı" description="Sonucu iki iş günü içinde e-postayla bildireceğiz." actions={<Button>Ana sayfaya dön</Button>}>
      <p className="m-0 type-body-sm text-fg-subtle">Başvuru numarası: 2026-0142</p>
    </ResultState>
  );
}

1. Ton ikonu: Büyüyerek belirir.
2. Başlık: Sonuç; ekran okuyucu tonu önünde duyar.
3. Açıklama: Bundan sonra ne olacağı.
4. Ayrıntılar: İsteğe bağlı.
5. Eylemler.

Davranış

• Ortalanır; metin satırı 440 px ile sınırlıdır.
• İkon bir kez büyüyerek belirir, döngüye girmez.
• focusOnMount ile odak başlığa taşınır.

Yönergeler

• Başlıkta sonucu söyleyin, açıklamada bundan sonra ne olacağını.
• Başarısız görevde kullanıcının girdisinin kaybolmadığını belirtin ve yeniden deneme yolu sunun.
• Bir birincil eylem kullanın.

İçerik

Türkçe	İngilizce
Başvurunuz alındı	Your application has been received
İşlem tamamlanamadı	The task could not be completed
Ana sayfaya dön	Back to home

İlgili bileşenler

• EmptyState: Boş içerik.
• Toast: Kısa işlemin sonucu.
• InlineAlert: Sayfadaki uyarı.