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
<Button as="summary">Summary text</Button>
The render function gets an object with two keys:
openis a boolean reflecting the
openattribute, and can be used to conditionally show or hide content.
toggleis a function that can be assigned to event handlers to trigger toggling of the
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.
The Details component also accepts a
render function prop.
Details components get
COMMON system props. Read our System Props doc page for a full list of available props.
|open||Boolean||Sets the open/closed state of the Details component|
|render||Function||Optional render function, to allow you to handle toggling and open/closed state from a container component.|
|overlay||Boolean||false||Sets whether or not element will close when user clicks outside of it|