Display the status of an application. Useful for non-ideal states such as empty state, error state, info state, loading state, and success state.

Usage

Empty State

Indicates the absence of items or data, prompting users to take action.

import { EmptyState } from '@passfort/castle'
import { Button } from '@passfort/castle'
content_copy
Copy

<EmptyState
  title="You Have No Items"
  actions={[
    <Button label="View Docs" />,
    <Button type="primary" label="Create New" />,
  ]}
/>
<EmptyState
  title="You Have No Items"
  actions={[
    <Button label="View Docs" />,
    <Button type="primary" label="Create New" />,
  ]}
/>
content_copy
Copy
live example

Error State

Communicates an error condition, providing details and possible remediation actions.

import { ErrorState } from '@passfort/castle'
content_copy
Copy

<ErrorState
  title="Error"
  description="The request could not be completed due to a server error."
/>
<ErrorState
  title="Error"
  description="The request could not be completed due to a server error."
/>
content_copy
Copy
live example

Info State

Conveys informational messages that require user attention or awareness.

import { InfoState } from '@passfort/castle'
content_copy
Copy

<InfoState
  title="Information"
  description="Your profile has been updated successfully."
/>
<InfoState
  title="Information"
  description="Your profile has been updated successfully."
/>
content_copy
Copy
live example

Loading State

Represents a loading or processing state, indicating that an action is in progress.

import { LoadingState } from '@passfort/castle'
content_copy
Copy

<LoadingState
  title="Loading"
  description="Please wait while we fetch your data."
/>
<LoadingState
  title="Loading"
  description="Please wait while we fetch your data."
/>
content_copy
Copy
live example

Success State

Confirms the successful completion of an action, providing positive feedback to the user.

import { SuccessState } from '@passfort/castle'
content_copy
Copy

<SuccessState
  title="Success"
  description="Your changes have been saved successfully."
/>
<SuccessState
  title="Success"
  description="Your changes have been saved successfully."
/>
content_copy
Copy
live example

Handling Long Descriptions

Ensure the component gracefully handles lengthy descriptions without compromising layout integrity.

import { ApplicationStatus } from '@passfort/castle'
content_copy
Copy

<ApplicationStatus
  icon="document"
  title="Extended Description"
  description="This is a very long description intended to test how the component handles content that exceeds typical lengths. It should properly constrain the text within the specified minimum and maximum widths without breaking the layout."
/>
<ApplicationStatus
  icon="document"
  title="Extended Description"
  description="This is a very long description intended to test how the component handles content that exceeds typical lengths. It should properly constrain the text within the specified minimum and maximum widths without breaking the layout."
/>
content_copy
Copy
live example

Minimal Status

Demonstrates the component with only the essential prop, showcasing default behaviors.

import { ApplicationStatus } from '@passfort/castle'
content_copy
Copy

<ApplicationStatus title="Minimal Status" />
<ApplicationStatus title="Minimal Status" />
content_copy
Copy
live example