Components

ResultState

The screen at the end of a task or flow that shows the outcome, what happens next and the next steps.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

The success icon grows in. children carries details such as a reference number.

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

We will email you the outcome within two working days.

Reference: 2026-0142

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

Tones

danger for a failed task, warning for one that finished with problems, info for one waiting on someone else.

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

We will email you the outcome within two working days.

Hata: The task could not be completed

What you entered has been saved. Try again in a moment.

Uyarı: Partly completed

One of three items could not be added.

Bilgi: Under review

Our team is reviewing your application.

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="Your application has been received" description="We will email you the outcome within two working days." />
      <ResultState tone="danger" headingLevel={3} title="The task could not be completed" description="What you entered has been saved. Try again in a moment." />
      <ResultState tone="warning" headingLevel={3} title="Partly completed" description="One of three items could not be added." />
      <ResultState tone="info" headingLevel={3} title="Under review" description="Our team is reviewing your application." />
    </div>
  );
}

End of a flow

When the result replaces the last step, focusOnMount moves focus to the title so screen readers read the outcome at once.

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)}>Send</Button>;
  return (
    <ResultState
      tone="success"
      headingLevel={2}
      focusOnMount
      title="Your application has been received"
      description="We will email you the outcome within two working days."
      actions={<Button onClick={() => setDone(false)}>Back to home</Button>}
    />
  );
}

Small

size="sm" is for a result inside a Card or a Drawer: the spacing, the icon and the title are smaller.

Live example, StorybookOpen in Storybook

Light and dark mode

The icon tile uses color-status-*-background and the icon color-icon-*.

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

We will email you the outcome within two working days.

Hata: The task could not be completed

What you entered has been saved. Try again in a moment.

Uyarı: Partly completed

One of three items could not be added.

Bilgi: Under review

Our team is reviewing your application.

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

We will email you the outcome within two working days.

Hata: The task could not be completed

What you entered has been saved. Try again in a moment.

Uyarı: Partly completed

One of three items could not be added.

Bilgi: Under review

Our team is reviewing your application.

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="Your application has been received" description="We will email you the outcome within two working days." />
      <ResultState tone="danger" headingLevel={3} title="The task could not be completed" description="What you entered has been saved. Try again in a moment." />
      <ResultState tone="warning" headingLevel={3} title="Partly completed" description="One of three items could not be added." />
      <ResultState tone="info" headingLevel={3} title="Under review" description="Our team is reviewing your application." />
    </div>
  );
}