Skip to content

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

Manage the open state manually

The Details element is built to also let you manage the open state and toggle functionality if necessary. Just provide values to the open and onToggle props.

Note: The overlay prop will not function automatically if you chose to provide your own open state. You'll need to implement this yourself. You can use the onClickOutside prop to implement and customize this behavior.

Click me

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
openBooleanUse the open prop if you'd like to manage the open state
onToggleFunctionCalled whenever user clicks on summary element. If you are controlling your own open state this will be the only function called on click, otherwise it's called before the internal handleToggle function.
onClickOutsideFunctionFunction to call whenever user clicks outside of the Details component. This is optional and only necessary if you are controlling your own open state.
Edit this page on GitHub
1 contributoremplums
Last edited by emplums on April 2, 2020