Panel

A tinted block that groups a short message with its actions, or a few details.

import { Button, Panel } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function PanelBasic() {
  return (
    <Preview stack={true}>
      <Panel.Root>
        Description
        <Button.Root>Action</Button.Root>
      </Panel.Root>
    </Preview>
  );
}

• Use a panel to group a short message with its actions, as on sign-in and onboarding cards, or a short list of details, such as an audit event’s fields.
• It is set apart by its inset fill, never by a border.
• For a titled section of a product page, use a Block. For a note inside the content, use a Callout.

API

Other props go to the native div.