Skip to main content
Version: Current

Web Components - Disclosure

A disclosure component is the implementation of native details and summary controls, which toggles the visibility of the extra content. Visually, it would look like a button or hyperlink beneath extra content. As defined by the W3C:

A disclosure is a button that controls the visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.


import { provideDesignSystem, alphaDisclosure } from '@genesislcap/alpha-design-system';



Live Editor
  <alpha-disclosure appearance="lightweight">
    <strong slot="title">Read about Foundation UI</strong>
      Foundation UI is a collection of technologies built on Web Components and modern Web Standards, designed to help you
      efficiently tackle some of the most common challenges in website and application design and development.

Use cases

  • Revealing additional information

Additional resources