Basic View

Component

Basic View serves as the essential foundation for various view states, ensuring consistent and appropriate design across all views.

Join the waitlist

Get notified when we're launching.

Basic View serves as the essential foundation for various view states, ensuring consistent and appropriate design across all views.

Design Pattern

A single view will require multiple states such as loading, empty, not found, and the main state. While the main state is designed specifically to optimize the user experience based on its content, the loading, empty, and not found states can all originate from the key elements of the Basic View:

  1. Icon/Image: A visual representation that supplements the content and provides context. Icons or images can quickly convey status or highlight important features, aiding in user recognition and comprehension.

  2. Name: The primary title or heading for the view. It offers a concise summary of the content or purpose of the view, helping users quickly understand what to expect.

  3. Description: A brief and informative text that elaborates on the name. It provides additional details and context to help users grasp the full scope and functionality of the view.

  4. Subline: A brief secondary text that succinctly describes the view in a few words. It provides additional clarity and helps users quickly understand the purpose or content of the view.

  5. Buttons: Interactive elements that allow users to take actions. Buttons can trigger functions, navigate to other views, or make selections, facilitating a more dynamic and responsive user experience.

This combination of elements ensures that each view state is designed to effectively enhance the user experience.

Summary

The Basic View serves as the foundation for various view states, ensuring consistent and appropriate designs across all scenarios.

Themes

Sizes

Loading

The loading state is shown while the content is being fetched or processed. It usually features a spinner, progress bar, or animation to indicate that the system is working, keeping users informed that their request is in progress.

Not Found

Not found state appears when the requested content cannot be located. It generally includes a message explaining the issue and may provide navigation options or suggestions to help users find what they are looking for.

Empty

Empty state is displayed when there is no content to show. It typically includes a message or illustration to inform the user why the view is empty and may suggest actions to populate the content, such as adding items or performing a search.

Success

The success state indicates that an operation or request has been completed successfully. It often features a positive icon or image, a confirmation message, and possibly next steps or actions the user can take.

Error

The error state is displayed when an operation fails or an unexpected issue occurs. It incorporates an error message and may include troubleshooting steps or options to retry the action, helping users resolve the problem.