EmptyState

EmptyState displays an icon, title, supporting text, optional additional details, and actions for empty or not-found views.

Code

import {
  Button,
  EmptyState,
  Icon,
  Typography,
} from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <EmptyState
      buttons={<Button>Create order</Button>}
      extraInfo={
        <div className="tw:flex tw:flex-col tw:items-center">
          <div className="tw:flex tw:flex-col tw:gap-3">
            <div className="tw:flex tw:items-center tw:gap-2">
              <Icon color="special" name="feature" size="24" />

              <Typography fontSize={18} lineHeight="medium">
                Import products from a catalog
              </Typography>
            </div>

            <div className="tw:flex tw:items-center tw:gap-2">
              <Icon color="special" name="feature" size="24" />

              <Typography fontSize={18} lineHeight="medium">
                Add line items manually
              </Typography>
            </div>
          </div>
        </div>
      }
      iconName="check-completed"
      subtext="Create an order or import products to start fulfillment."
      title="No orders yet"
    />
  );
}

Not Found

Code

import { EmptyState, Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <EmptyState
      extraInfo={
        <div className="tw:flex tw:flex-col tw:items-center">
          <div className="tw:flex tw:flex-col tw:gap-3">
            <a className="link-color" href="tel:(123) 456-7890">
              <div className="tw:flex tw:items-center tw:gap-2">
                <Icon name="phone-3" size="24" />
                <span>(123) 456-7890</span>
              </div>
            </a>

            <a className="link-color" href="mailto:support@example.com">
              <div className="tw:flex tw:items-center tw:gap-2">
                <Icon name="email" size="24" />
                <span>support@example.com</span>
              </div>
            </a>
          </div>
        </div>
      }
      iconName="pack-1-invoice"
      subtext="We're sorry, this contract could not be found. It might have been voided or deleted. If you believe this is an error, please let us know."
      title="Contract not found."
    />
  );
}

API

EmptyState

Props

border

border?: boolean = true

buttons

buttons?: React.ReactNode

className

className?: string

extraInfo

extraInfo?: React.ReactNode

iconName

iconName?: string

smallTitle

smallTitle?: boolean

subtext

subtext?: React.ReactNode

sx

sx?: StyleProps

title

title?: React.ReactNode