EmptyState

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

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

Primary

Code

<EmptyState
  buttons={<Button>Create order</Button>}
  extraInfo={
    <FlexWrapper align="center" direction="column">
      <FlexWrapper direction="column" gap={12}>
        <FlexWrapper align="center" gap={8}>
          <Icon color="special" name="feature" size="24" />

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

        <FlexWrapper align="center" gap={8}>
          <Icon color="special" name="feature" size="24" />

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

Not Found

Code

<EmptyState
  extraInfo={
    <FlexWrapper align="center" direction="column">
      <FlexWrapper direction="column" gap={12}>
        <a className="link-color" href="tel:(123) 456-7890">
          <FlexWrapper align="center" gap={8}>
            <Icon name="phone-3" size="24" />
            <span>(123) 456-7890</span>
          </FlexWrapper>
        </a>

        <a className="link-color" href="mailto:support@example.com">
          <FlexWrapper align="center" gap={8}>
            <Icon name="email" size="24" />
            <span>support@example.com</span>
          </FlexWrapper>
        </a>
      </FlexWrapper>
    </FlexWrapper>
  }
  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

Name	Type/Description
`border = true`	`boolean \| undefined`
`buttons`	`ReactNode`
`className`	`string \| undefined`
`extraInfo`	`ReactNode`
`iconName`	`string \| undefined`
`smallTitle`	`boolean \| undefined`
`subtext`	`ReactNode`
`sx`	`StyleProps \| undefined`
`title`	`ReactNode`