Details

When you want to provide additional information in context, but you do not want it to clutter up the more important content, use <Details> to add a collapsible container.

import { Details } from "~/components";

<Details header="Open me!">Hello, world!</Details>

You can specify the default configuration of each instance of the <Details> component (that is, whether it is open or closed by default).

import { Details } from "~/components";

<Details header="Close me!" open={true}>
	Long piece of code example.
</Details>

The primary answer or core instruction should always appear in the main content flow, not exclusively inside a tab or collapsible section.

Use tabs for platform-specific variations (for example, Dashboard versus API versus Terraform) only after stating the general concept. Use Details for supplementary information, not for the primary answer.

• header string required

• id string optional

  Adds a specific id to the HTML element

• open boolean optional