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.

You are responsible for rendering your own <summary>. To style your summary element like a Button, you can use the as prop:

<Button as="summary">Summary text</Button>

With static children

Click me

This should show and hide

With children as a function

The render function gets an object with the open render prop to allow you to conditionally update UI based on the open state of the dropdown:

Show

This should show and hide

System props

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

Component props

NameTypeDefaultDescription
defaultOpenBooleanSets the initial open/closed state
overlayBooleanfalseSets whether or not element will close when user clicks outside of it