Details

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

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

See Details

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

See Details

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

See Details

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

Loading data for details...

useDetails