Skip to content
Primer/Interface guidelines
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout
  • Foundations
    • Introduction
    • The Zen of GitHub
    • Content
    • Color
    • Responsive
    • Layout
    • Typography
  • Accessibility
    • Accessibility at GitHub
    • Guidelines
    • Tools
    • Alternative text for images
    • Assistive technology announcements
    • Descriptive buttons
    • Focus management
    • Headings
    • Links
    • Semantic HTML
    • Text resize and respacing
    • Tooltip alternatives
    • Truncation
  • UI patterns
    • Button usage
    • Dates and times
    • Empty states
    • Feature onboarding
    • Forms
    • Messaging
    • Progressive disclosure
    • Saving
  • Components
    • Action bar
    • Action list
    • Action menu
    • Anchored overlay
    • Autocomplete
    • Avatar
    • Avatar pair
    • Avatar stack
    • Box
    • Branch name
    • Breadcrumb
    • Checkbox
    • Checkbox group
    • Comment box
    • Counter label
    • Data table
    • Details
    • Dialog
    • Filter input
    • Icon
    • Segmented control
    • Toggle switch
    • Tokens
    • Tree view
  • Design tools
    • Figma
  • GitHub
On this page
  • Usage

Details

Details is a styled component to enhance the native behaviors of the <details> element.
  • React
  • Rails
On this page
  • Usage

Usage

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.

Edit this page on GitHub
1 contributoremilybrick
Last edited by emilybrick on December 13, 2022