ResultState

When to use

ResultState clearly shows the outcome at the end of a multi-step flow or a long task: an application received, a task that could not be completed, a review in progress.

When not to use

• For the result of a short action: Use Toast.
• When there is no content yet: Use EmptyState.
• For an error on the page: Use InlineAlert.

Anatomy

Başarılı: Your application has been received

We will email you the outcome within two working days.

Reference: 2026-0142

Back to home

LightDark

Copy code

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

export default function Default() {
  return (
    <ResultState tone="success" headingLevel={2} title="Your application has been received" description="We will email you the outcome within two working days." actions={<Button>Back to home</Button>}>
      <p className="m-0 type-body-sm text-fg-subtle">Reference: 2026-0142</p>
    </ResultState>
  );
}

1. Tone icon: Grows in.
2. Title: The outcome; screen readers hear the tone before it.
3. Description: What happens next.
4. Details: Optional.
5. Actions.

Behaviour

• It is centred; text lines stop at 440 px.
• The icon grows in once and never loops.
• focusOnMount moves focus to the title.

Guidelines

• State the outcome in the title and what happens next in the description.
• For a failed task, say that what the person entered is not lost and offer a way to try again.
• Use one primary action.

Content

Turkish	English
Başvurunuz alındı	Your application has been received
İşlem tamamlanamadı	The task could not be completed
Ana sayfaya dön	Back to home

Related components

• EmptyState: Empty content.
• Toast: The result of a short action.
• InlineAlert: An alert on the page.