Skip to main content


A disclosure component is the implementation of native details and summary controls that toggles the visibility of the extra content. Visually, it would look like a button or hyperlink and 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 {    provideFASTDesignSystem,    fastDisclosure} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastDisclosure()    );


Live Editor
SyntaxError: Unexpected token (1:8)
1 : return ()

Create your own design#

import {    Disclosure,    disclosureTemplate as template,} from "@microsoft/fast-foundation";import { disclosureStyles as styles } from "./my-disclosure.styles";
export const myDisclosure = Disclosure.compose({    baseName: "disclosure",    template,    styles,});

Additional resources#