Detail surface for a single object with title, status, metadata, actions, and body slots.
DetailPanel is the canonical detail surface for a single product object — a record, a workspace, a release. Pair with DescriptionList for metadata and Tabs for sectioned bodies.
Status pairs well with StatusIndicator.
Body content lives here. Compose tabs, description lists, and actions.
<DetailPanel
actions={<Button size="sm">Edit</Button>}
eyebrow="Workspace"
title="Release 0.5.0"
>
<p>Body content lives here. Compose tabs, description lists, and actions.</p>
</DetailPanel>import { DetailPanel, ObjectDetail } from "@froggdesign/enter-ui-react";DetailPanel renders as <section> with <h2> for the title so the panel is announced as a region with a heading. Place exactly one DetailPanel per detail surface to avoid landmark collisions.
eyebrow, title, status: heading slots.actions: trailing action slot.metadata: optional metadata band rendered between heading and body.children: main body.ObjectDetail: alias of DetailPanel. Use whichever name reads closer to the domain.Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.