Details

The Details component is an HTML <details> element without native browser styling that optionally uses the render props pattern to pass its state to child components. The default <summary> element, populated via the summary prop is an extension of the Button element, therefore, accepts the same props as Button does (if you fancy leveraging variant styles, for example).

Hey ma', I'm a custom summary!
And, I'm the details
<Details summary={"Hey ma', I'm a custom summary!"}>
And, I'm the details
</Details>

Dark overlay

Hey ma', it's night time!
And, I'm the bright stars above!
<Details dark summary={"Hey ma', it's night time!"}>
And, I'm the bright stars above!
</Details>

With an icon

Stand-alone

I'm invoked with an icon in the summary tag
I'm invoked with an icon in a styled summary tag
I'm also invoked with an icon in a styled summary tag
<Details variant='plain' icon='triangle-down'>I'm invoked with an icon in the summary tag</Details>
<Details icon='triangle-down'>I'm invoked with an icon in a styled summary tag</Details>
<Details variant='primary' icon='triangle-down'>I'm also invoked with an icon in a styled summary tag</Details>

With adjacent text/label

User-friendly label
I'm invoked with an icon in the summary tag
Another user-friendly label
I'm invoked with an icon in a styled summary tag
C'mon now, I'm user-friendly
I'm also invoked with an icon in a styled summary tag
<Details variant='plain' summary="User-friendly label" icon='pulse'>I'm invoked with an icon in the summary tag</Details>
<Details summary='Another user-friendly label' icon='comment-discussion'>I'm invoked with an icon in a styled summary tag</Details>
<Details summary="C'mon now, I'm user-friendly" variant='primary' icon='star'>I'm also invoked with an icon in a styled summary tag</Details>

With adjacent text/label, icon on the right-side

User-friendly label
I'm invoked with an icon in the summary tag
Another user-friendly label
I'm invoked with an icon in a styled summary tag
C'mon now, I'm user-friendly
I'm also invoked with an icon in a styled summary tag
<Details variant='plain' summary="User-friendly label" icon='pulse' iconPlacement='right'>I'm invoked with an icon in the summary tag</Details>
<Details summary='Another user-friendly label' icon='comment-discussion' iconPlacement='right'>I'm invoked with an icon in a styled summary tag</Details>
<Details summary="C'mon now, I'm user-friendly" variant='primary' icon='star' iconPlacement='right'>I'm also invoked with an icon in a styled summary tag</Details>

With variant styles

Custom variant style - primary
I'm the details
Custom variant style - danger
I'm the details
Custom variant style - outline
I'm the details
Custom variant style - purple
I'm the details
<Details variant='primary' summary={"Custom variant style - primary"}>
I'm the details
</Details>
<Details variant='danger' summary={"Custom variant style - danger"}>
I'm the details
</Details>
<Details variant='outline' summary={"Custom variant style - outline"}>
I'm the details
</Details>
<Details variant='purple' summary={"Custom variant style - purple"}>
I'm the details
</Details>

With children as a function

The render function gets an object with two keys:

  • open is a boolean reflecting the <details> element's open attribute, and can be used to conditionally show or hide content.
  • toggle is a function that can be assigned to event handlers to trigger toggling of the open state.

If you use this form or the render prop (see below), you must attach the toggle prop as an event listener. If you don't the render function will not be called when the element is toggled by the native browser behavior.

Show

This should show and hide

<Details>
  {({open, toggle}) => (
    <>
      <Button is="summary" onClick={toggle}>
        {open ? 'Hide' : 'Show'}
      </Button>
      <p>This should show and hide</p>
    </>
  )}
</Details>

With render prop

The Details component also accepts a render function prop.

Open? false

This is the content.

<Details render={({open, toggle}) => (
  <>
    <Button is="summary" onClick={toggle}>Open? {String(open)}</Button>
    <p>This is the content.</p>
  </>
)} />

System props

Details components get COMMON system props. Read the System Props doc page for a full list of available props.

Component props

For styling of the summary child element, and influencing the rendered content, the Details component accepts props from the Button component in addition to those defined below.

NameTypeDefaultDescription
darkBooleanfalseSets a darker background when Details component is open
openBooleanSets the open/closed state of the Details component
renderFunctionOptional render function, to allow you to handle toggling and open/closed state from a container component.
summaryStringDetailsSets the text-value of the summary child element