DisplayId - Admin Components

The DisplayId component shows the last seven characters of an ID, prefixed by a hash. When the user hovers over it, Medusa shows the full ID in a tooltip, and when the user clicks it, Medusa copies the full ID to the clipboard and shows a success toast.

import { DisplayId } from "@medusajs/dashboard/components"

Example#

Use DisplayId in a widget or UI route to show a record's ID in a compact way:

import {
  DisplayId,
  SectionRow,
} from "@medusajs/dashboard/components"

const BrandIdRow = ({ brand }) => {
  return (
    <SectionRow
      title="ID"
      value={<DisplayId id={brand.id} />}
    />
  )
}

Props#

The component accepts the DisplayIdProps type: