DisplayId - Admin Components

Note: This component is available since Medusa v2.21.0.

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.

Code
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:

Code
1import {2  DisplayId,3  SectionRow,4} from "@medusajs/dashboard/components"5
6const BrandIdRow = ({ brand }) => {7  return (8    <SectionRow9      title="ID"10      value={<DisplayId id={brand.id} />}11    />12  )13}

Props#

The component accepts the DisplayIdProps type:

Loading...
Was this page helpful?
Ask Bloom
For assistance in your development, use Claude Code Plugins or Docs MCP server in Cursor, VSCode, etc...FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break
⇧↵