Help

Empty States - Admin Components

Note: These components are available since Medusa v2.21.0.

The NoRecords and NoResults components show the empty states of lists and tables in the Medusa Admin. Use NoRecords when a list has no data at all, and NoResults when a search or filter returns no matches.

Code
import {
  NoRecords,
  NoResults,
} from "@medusajs/dashboard/components"

Both components fall back to the Medusa Admin's default translated messages when you don't pass a title or a message. Learn more about translations in the Admin Translations documentation.

NoRecords#

The NoRecords component shows an icon, a title, a message, and an optional link button. The Medusa Admin uses it in sections that have no data yet, such as a customer with no addresses.

Example#

Code
import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { NoRecords } from "@medusajs/dashboard/components"
import { Container } from "@medusajs/ui"

const CampaignsWidget = () => {
  const campaigns = []

  return (
    <Container className="p-0">
      {campaigns.length === 0 && (
        <NoRecords
          title="No campaigns"
          message="Create a campaign to get started."
          action={{
            to: "/campaigns/create",
            label: "Create campaign",
          }}
        />
      )}
    </Container>
  )
}

export const config = defineWidgetConfig({
  zone: "product.details.after",
})

export default CampaignsWidget

Props#

titlestringOptional

The empty state's title. Defaults to the Medusa Admin's translated general.noRecordsTitle message.

messagestringOptional

The message shown under the title. Defaults to the Medusa Admin's translated general.noRecordsMessage message.

actionobjectOptional

A button shown under the message that links to the to path. If not passed, no button is shown.

buttonVariant"default" | "transparentIconLeft"Optional

The action button's style. default shows a secondary button, and transparentIconLeft shows a transparent button with a plus icon.

Default: default

iconReact.ReactNodeOptional

The icon shown above the title. Defaults to an exclamation-circle icon.

classNamestringOptional

Additional CSS classes to apply to the empty state's container.

NoResults#

The NoResults component shows a magnifying-glass icon, a title, and a message. The Medusa Admin uses it in tables when a search query or a filter returns no matching records.

Example#

Code
import { defineWidgetConfig } from "@medusajs/admin-sdk"
import { NoResults } from "@medusajs/dashboard/components"
import { Container } from "@medusajs/ui"

const SearchResultsWidget = () => {
  const results = []

  return (
    <Container className="p-0">
      {results.length === 0 && <NoResults />}
    </Container>
  )
}

export const config = defineWidgetConfig({
  zone: "product.details.after",
})

export default SearchResultsWidget

Props#

titlestringOptional

The empty state's title. Defaults to the Medusa Admin's translated general.noResultsTitle message.

messagestringOptional

The message shown under the title. Defaults to the Medusa Admin's translated general.noResultsMessage message.

classNamestringOptional

Additional CSS classes to apply to the empty state's container.

The NoResultsProps type is also exported, so you can use it to type your own wrapper components:

Code
import type {
  NoResultsProps,
} from "@medusajs/dashboard/components"

Was this page helpful?