Patterns

Empty, error and loading

No bookings yet

Bookings appear here as soon as drivers make them.

This view could not load

The request failed before any rows came back. Nothing has been changed.

states.tsx

"use client";

import { Button, EmptyState, ErrorState, Skeleton } from "@waveinno/ui";

export default function StatesExample() {
  return (
    <div className="grid gap-3 lg:grid-cols-2">
      <EmptyState title="No bookings yet" description="Bookings appear here as soon as drivers make them." action={<Button>Share link</Button>} />
      <ErrorState onRetry={() => undefined} />
      <div className="space-y-2 lg:col-span-2">
        <Skeleton className="h-4 w-1/3" />
        <Skeleton className="h-4 w-2/3" />
      </div>
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { Button, EmptyState, ErrorState, Skeleton } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<EmptyState>

src/components/patterns/states.tsx

Prop	Type	Default
`icon`	`React.ElementType`	`Inbox`
`title`required	`string`	—
`description`	`string`	—
`action`	`React.ReactNode`	—
`className`	`string`	—

<ErrorState>

src/components/patterns/states.tsx

Prop	Type	Default
`title`	`string`	`"This view could not load"`
`description`	`string`	`"The request failed before any rows came back. Nothing has been changed."`
`onRetry`	`() => void`	—
`detail`	`string`	—

<Button>

src/components/ui/button.tsx

Prop	Type	Default	Description
`asChild`	`boolean`	`false`
`loading`	`boolean`	—

Also takes ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>.

<Skeleton>

src/components/ui/skeleton.tsx

Also takes HTMLAttributes<HTMLDivElement> (passed through).

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui