Details

The details component is a UI element that allows users to expand and collapse sections of content vertically to show or hide detailed information.

Click to show details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac diam fermentum, sagittis erat at, rhoncus ante. Sed vestibulum orci vel efficitur auctor. Donec tempor odio nec felis blandit, ut vulputate ligula tincidunt. Sed finibus varius finibus. Fusce non enim et metus accumsan commodo. Pellentesque auctor arcu eu consectetur tincidunt.


<Details summary={'Click to show details'}>
  <p>Lorem ipsum...</p>
</Details>

Icon position

The position of the icon can be set to start (default) or end.

Click to show details


<Details summary={'Click to show details'} iconPosition={'start'} name={'expand'}>
  <p>Lorem ipsum...</p>
</Details>
 
<Details summary={'Click to show details'} iconPosition={'end'} name={'expand'}>
  <p>Lorem ipsum...</p>
</Details>

Custom icon

By default, Detailss will be rendered with a chevron icon. To customize the icon, use the icon prop.

Click to show details


<Details summary={'Click to show details'} icon={<svg>...</svg>}>
  <p>Lorem ipsum...</p>
</Details>
 
<Details summary={'Click to show details'} icon={<svg>...</svg>}>
  <p>Lorem ipsum...</p>
</Details>

Divider

Use the divider prop to add a divider between the summary and the content.

Click to show details


<Details summary={'Click to show details'} divider>
  <p>Lorem ipsum...</p>
</Details>

Props

Name	Type	Default	Description
children	`node`	-	Content of the component
dark	`boolean`	false	Use the darkmode style
divider	`boolean`	false	Add a divider between summary and content
summary	`string`	-	Summary text
icon	`Node`	-	Use a custom expand/collapse icon
iconPosition	`start` \| `end`	start	Set the position of the icon

In addition to these props the component uses the default html details props (e.g. name).