Details

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

React

readyNot reviewed for a11y

Rails

readyNot reviewed for a11y

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

Details

Name	Required	Description
sx		`SystemStyleObject`

Details.Summary

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

useDetails