StatusPanel

StatusPanel component displays contextual information with clear visual hierarchy. It provides users with important status updates, notifications, and actionable content in a structured format.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { StatusPanel } from '@adaptavant/eds-core';

Variants​

The StatusPanel is available in 5 variants - info, warning, error, success, and none. info is the default.

System Update

Your system has been updated successfully.

Scheduled Maintenance

System maintenance will occur tonight from 11 PM to 1 AM EST.

Service Unavailable

We're experiencing issues with our payment service. Please try again later.

Payment Successful

Your payment has been processed successfully.

Custom Status

This panel displays without an icon.
{/* info */}
<StatusPanel 
  title="System Update" 
  description="Your system has been updated successfully." 
/>

{/* warning */}
<StatusPanel 
  variant="warning" 
  title="Scheduled Maintenance" 
  description="System maintenance will occur tonight from 11 PM to 1 AM EST." 
/>

{/* error */}
<StatusPanel 
  variant="error" 
  title="Service Unavailable" 
  description="We're experiencing issues with our payment service. Please try again later." 
/>

{/* success */}
<StatusPanel 
  variant="success" 
  title="Payment Successful" 
  description="Your payment has been processed successfully." 
/>

{/* none */}
<StatusPanel 
  variant="none" 
  title="Custom Status" 
  description="This panel displays without an icon." 
/>
View in Playroom

With Custom Action​

You can compose rich content within the StatusPanel component by providing custom action elements.

Storage Almost Full

You're using 85% of your storage space.
{/* With action button */}
<StatusPanel 
  variant="warning"
  title="Storage Almost Full"
  description="You're using 85% of your storage space."
  action={
    <Button>Upgrade Plan</Button>
  }
/>
View in Playroom

With Custom Icon​

You can override the default variant icon with a custom icon that better represents your specific use case.

Welcome to the Setmore!

Get started by completing your profile setup.
<StatusPanel
  variant="none"
  customIcon={SetmoreIcon}
  title="Welcome to the Setmore!"
  description="Get started by completing your profile setup."
  action={
    <GetPro size="small" isExpanded isRounded />
  }
/>
View in Playroom

Error Boundary Usage​

Error boundaries are a React pattern for gracefully handling JavaScript errors in component trees. When combined with StatusPanel, they provide users with clear, actionable feedback when something goes wrong, rather than showing broken interfaces or cryptic error messages.

Note: Next.js App Router has its own error handling approach with nested error boundaries.

Installation and Setup​

Using react-error-boundary is a simple way to implement an error boundary component:

npm install react-error-boundary
# or
yarn add react-error-boundary
# or  
pnpm add react-error-boundary

Error Boundary Pattern​

The simplest implementation uses StatusPanel as a fallback component:

import { ErrorBoundary } from 'react-error-boundary';
import { StatusPanel, Button } from '@adaptavant/eds-core';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <StatusPanel
      variant="error"
      title="Something went wrong"
      description="An unexpected error occurred. Please try again or contact support if the problem persists."
      action={
        <Button onClick={resetErrorBoundary} variant="criticalPrimary">
          Try Again
        </Button>
      }
    />
  );
}

function MyComponent() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <RiskyComponent />
    </ErrorBoundary>
  );
}

API Reference​

StatusPanel

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

StatusPanel parts​

Custom Styled Panel

This panel has custom styling applied.
<StatusPanel
	className="p-6 bg-neutral-secondary"
	classNames={{
		container: 'gap-3 bg-positive text-onPrimary',
		icon: 'fill-caution',
		title: 'text-heading-24',
		description: 'text-body-16 md:text-body-14',
		action: 'gap-2 bg-critical w-full flex justify-center'
	}}
	variant="success"
	title="Custom Styled Panel"
	description="This panel has custom styling applied."
	action={<Button size="large">Action</Button>}
/>
View in Playroom
Stylable PartsDescription
containerThe container that wraps the title and description.
iconThe icon that appears at the beginning of the status panel.
titleThe title text element.
descriptionThe description text element.
actionThe container for action elements.