Empty States - Admin Components

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
1import {2  NoRecords,3  NoResults,4} 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
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { NoRecords } from "@medusajs/dashboard/components"3import { Container } from "@medusajs/ui"4
5const CampaignsWidget = () => {6  const campaigns = []7
8  return (9    <Container className="p-0">10      {campaigns.length === 0 && (11        <NoRecords12          title="No campaigns"13          message="Create a campaign to get started."14          action={{15            to: "/campaigns/create",16            label: "Create campaign",17          }}18        />19      )}20    </Container>21  )22}23
24export const config = defineWidgetConfig({25  zone: "product.details.after",26})27
28export default CampaignsWidget

Props#

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
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { NoResults } from "@medusajs/dashboard/components"3import { Container } from "@medusajs/ui"4
5const SearchResultsWidget = () => {6  const results = []7
8  return (9    <Container className="p-0">10      {results.length === 0 && <NoResults />}11    </Container>12  )13}14
15export const config = defineWidgetConfig({16  zone: "product.details.after",17})18
19export default SearchResultsWidget

Props#

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

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