Details

Details is a styled component to enhance the native behaviors of the <details> element.

Page navigation navigation

React

ready

Rails

ready

The details component can reveal additional information by using a button to toggle between hidden and visible. It includes a summary followed by the content that's hidden or visible.

By default, the information is hidden. When triggered, it expands and displays the information.

React examples

Default

Toggle Details

This is some content

import React from 'react'
import {Button, Details, useDetails} from '@primer/react'


export default function Default() {
  const {getDetailsProps} = useDetails({})


  return (
    <Details {...getDetailsProps()}>
      <Button as="summary">Toggle Details</Button>
      This is some content
    </Details>
  )
}

import React from 'react'
import {Button, Details, useDetails} from '@primer/react'

export default function Default() {
  const {getDetailsProps} = useDetails({})

  return (
    <Details {...getDetailsProps()}>
      <Button as="summary">Toggle Details</Button>
      This is some content
    </Details>
  )
}

`Details` component open by default

Toggle Details

This is some content

import React from 'react'
import {Button, Details, useDetails} from '@primer/react'


export default function DefaultOpen() {
  const {getDetailsProps} = useDetails({defaultOpen: true})


  return (
    <Details {...getDetailsProps()}>
      <Button as="summary">Toggle Details</Button>
      This is some content
    </Details>
  )
}

import React from 'react'
import {Button, Details, useDetails} from '@primer/react'

export default function DefaultOpen() {
  const {getDetailsProps} = useDetails({defaultOpen: true})

  return (
    <Details {...getDetailsProps()}>
      <Button as="summary">Toggle Details</Button>
      This is some content
    </Details>
  )
}

With a callback for clicking outside the component

Toggle Details

This is some content

import React from 'react'
import {Button, Details, useDetails} from '@primer/react'


export default function OnClickOutside() {
  const {getDetailsProps} = useDetails({
    closeOnOutsideClick: true,
    onClickOutside: () => {
      alert('You clicked outside Details')
    },
  })


  return (
    <Details {...getDetailsProps()}>
      <Button as="summary">Toggle Details</Button>
      This is some content
    </Details>
  )
}

import React from 'react'
import {Button, Details, useDetails} from '@primer/react'

export default function OnClickOutside() {
  const {getDetailsProps} = useDetails({
    closeOnOutsideClick: true,
    onClickOutside: () => {
      alert('You clicked outside Details')
    },
  })

  return (
    <Details {...getDetailsProps()}>
      <Button as="summary">Toggle Details</Button>
      This is some content
    </Details>
  )
}

Close the `Details` component when clicking outside of it

See Details

This is some content

import React from 'react'
import {Button, Details, useDetails} from '@primer/react'


export default function CloseOnOutsideClick() {
  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})


  return (
    <Details {...getDetailsProps()}>
      <Button as="summary">See Details</Button>
      This is some content
    </Details>
  )
}

import React from 'react'
import {Button, Details, useDetails} from '@primer/react'

export default function CloseOnOutsideClick() {
  const {getDetailsProps} = useDetails({closeOnOutsideClick: true})

  return (
    <Details {...getDetailsProps()}>
      <Button as="summary">See Details</Button>
      This is some content
    </Details>
  )
}

Props

Details

No props documented

Details.Summary

Name	Default	Description
as	`summary`	`React.ElementType<React.PropsWithChildren<any>>` HTML element to render summary as.
children		`React.ReactNode`

useDetails