Details

The Details component is used 828 times on 300 pages.

See all examples of pages that use Details

Used 828 times.

Pages

Partials

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.

Open me!

Hello, world!

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).

Close me!

Long piece of code example.

import { Details } from "~/components";

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

Additional guidance

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.

Properties

header string required
id string optional

Adds a specific id to the HTML element
open boolean optional