Bileşenler

ResultState

Bir görevin ya da akışın sonunda sonucu, bundan sonra ne olacağını ve sonraki adımları gösteren ekran.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Başarı ikonu büyüyerek belirir. children başvuru numarası gibi ayrıntıları taşır.

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

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

Başvuru numarası: 2026-0142

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>
  );
}

Tonlar

Başarısız görev için danger, sorunlarla biten için warning, başkasını bekleyen için info.

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

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

Hata: İşlem tamamlanamadı

Girdiğiniz bilgiler kaydedildi. Biraz sonra yeniden deneyin.

Uyarı: Kısmen tamamlandı

Üç öğeden biri eklenemedi.

Bilgi: İnceleniyor

Ekibimiz başvurunuzu inceliyor.

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

export default function Tones() {
  return (
    <div className="grid gap-lg sm:grid-cols-2">
      <ResultState tone="success" headingLevel={3} title="Başvurunuz alındı" description="Sonucu iki iş günü içinde e-postayla bildireceğiz." />
      <ResultState tone="danger" headingLevel={3} title="İşlem tamamlanamadı" description="Girdiğiniz bilgiler kaydedildi. Biraz sonra yeniden deneyin." />
      <ResultState tone="warning" headingLevel={3} title="Kısmen tamamlandı" description="Üç öğeden biri eklenemedi." />
      <ResultState tone="info" headingLevel={3} title="İnceleniyor" description="Ekibimiz başvurunuzu inceliyor." />
    </div>
  );
}

Akışın sonu

Sonuç son adımın yerini alınca focusOnMount odağı başlığa taşır; ekran okuyucu sonucu hemen okur.

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

export default function EndOfFlow() {
  const [done, setDone] = useState(false);
  if (!done) return <Button onClick={() => setDone(true)}>Gönder</Button>;
  return (
    <ResultState
      tone="success"
      headingLevel={2}
      focusOnMount
      title="Başvurunuz alındı"
      description="Sonucu iki iş günü içinde e-postayla bildireceğiz."
      actions={<Button onClick={() => setDone(false)}>Ana sayfaya dön</Button>}
    />
  );
}

Küçük

size="sm" bir Card ya da Drawer içindeki sonuç içindir: boşluklar, ikon ve başlık küçülür.

Canlı örnek, StorybookStorybook'ta aç

Açık ve koyu mod

İkon alanı color-status-*-background, ikon color-icon-* kullanır.

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

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

Hata: İşlem tamamlanamadı

Girdiğiniz bilgiler kaydedildi. Biraz sonra yeniden deneyin.

Uyarı: Kısmen tamamlandı

Üç öğeden biri eklenemedi.

Bilgi: İnceleniyor

Ekibimiz başvurunuzu inceliyor.

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

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

Hata: İşlem tamamlanamadı

Girdiğiniz bilgiler kaydedildi. Biraz sonra yeniden deneyin.

Uyarı: Kısmen tamamlandı

Üç öğeden biri eklenemedi.

Bilgi: İnceleniyor

Ekibimiz başvurunuzu inceliyor.

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

export default function Tones() {
  return (
    <div className="grid gap-lg sm:grid-cols-2">
      <ResultState tone="success" headingLevel={3} title="Başvurunuz alındı" description="Sonucu iki iş günü içinde e-postayla bildireceğiz." />
      <ResultState tone="danger" headingLevel={3} title="İşlem tamamlanamadı" description="Girdiğiniz bilgiler kaydedildi. Biraz sonra yeniden deneyin." />
      <ResultState tone="warning" headingLevel={3} title="Kısmen tamamlandı" description="Üç öğeden biri eklenemedi." />
      <ResultState tone="info" headingLevel={3} title="İnceleniyor" description="Ekibimiz başvurunuzu inceliyor." />
    </div>
  );
}