StateScreenState screens are pre-designed layouts created for various purposes, including FTEs, empty states, success messages, error screens, and more.
State screens can occupy a full screen or a portion of it. They can be used in both modals and pushed screens.
- Overview
- Dev
OverviewThe State screen component is composed of a visual, title, subtitle, CTA, link button, and disclaimer. Each element is optional and they all can be combined in various ways to meet different needs.
State screens can occupy a full screen or a portion of it. They can be used in both modals and pushed screens.
Visual TypesThe State Screen component can be used with or without a visual.
A visual can be an illustration, marketing visual, cover image or an icon.
Structure
AlignmentContent aligned to the center of the screen.
Cover Image Implementation
When using the State Screen with a cover image, in a full screen, the component is split into 2 sections; cover image and content.
Default Containers Ratio Mobile Phone: 50% - Cover Image 50% - Content
Tablet: 60% - Cover Image 40% - Content (Max 70% for Image container)
Image Implementation
- Do not scale the image at any size.
- Image is pinned to bottom of the container.
- Image is aligned to center of the screen.
- Excess height+Width is being cropped.
Tablet
Image Artboard Size 50% Image Container - 1366x640 60% Image Container (default) - 1366x765 70% Image Container - 1366x895
Safe Area - 768x430
Recommended Area - 672x356
UsageCode Example
<StateScreen
title={'Title'}
subtitle={'Subtitle'}
ctaLabel={'Done'}
imageSource={source}
/>
APIThis is the list of additional props for the component