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

Installation

Package: @bigbang/ui
Import: import { ResultState } from '@bigbang/ui';
Source: ResultState.tsx
Storybook: ResultState · Playground

ResultState is in the @bigbang/ui package.

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

<ResultState
  tone="success"
  focusOnMount
  title="Your application has been received"
  description="We will email you the outcome within two working days."
  actions={<Button>Back to home</Button>}
/>;

Props

toneRequired

Description: How the task ended: success, danger when it failed, warning when it finished with problems, info when it is waiting on someone else.
Type: AlertTone

titleRequired

Description: The outcome, in a few words, such as "Başvurunuz alındı".
Type: ReactNode

description

Description: What happens next, in one or two sentences.
Type: ReactNode

actions

Description: The next steps: one primary Button and at most one secondary Button or Link.
Type: ReactNode

children

Description: Details under the text, such as a reference number or a short summary list.
Type: ReactNode

headingLevel

Description: Document level of the title.
Type: 1 | 2 | 3
Default: 1

focusOnMount

Description: Moves focus to the title when the result replaces the last step of a flow, so screen readers read it at once.
Type: boolean
Default: false

size

Description: sm is tighter, with a smaller icon and title, for a result inside a Card or a Drawer; md fills a page.
Type: 'sm' | 'md'
Default: 'md'

className

Description: For layout only: margins and placement.
Type: string

Data attributes

data-component="result-state" and data-tone: on the root.