Empty

since 1.2

Empty is a component for displaying empty states when there's no content to show.

Example

Variant

No results found

We couldn't find any items matching your criteria. Try adjusting your filters or search terms.

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@strongtie/design-system/empty"
import { FileQuestion } from "lucide-react"

export function EmptyDefault() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FileQuestion />
        </EmptyMedia>
        <EmptyTitle>No results found</EmptyTitle>
        <EmptyDescription>
          We couldn't find any items matching your criteria. Try adjusting your
          filters or search terms.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Clear filters</Button>
      </EmptyContent>
    </Empty>
  )
}

Install

import { Empty } from "@strongtie/design-system/empty"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Empty
EmptyHeader
EmptyTitle
EmptyDescription
EmptyContent
EmptyMedia

Props

`<EmptyMedia>`

Prop	Type	Default	Description
`variant`	`"default" \| "icon" \| null`	`default`

Variants

variant

defaulticon

Dropdown Menu Field

On This Page

Example Install Components Props <EmptyMedia>Variants