Skip to content
GitHub

Disclosure

This component allows you to show/hide content within a collapsible container.

The client:load attribute is required for the component to work because the component uses Javascript for interactivity.

To use the component, the page must be in .mdx format. Change the format from .md to .mdx if necessary. All your existing markdown will still be supported without issue.

Usage

Import the Disclosure component like so:

import { Disclosure } from "@interledger/docs-design-system";

Use the <Disclosure> component within your content like so:

<Disclosure toggleText="Show code snippets" client:load>
   <!-- Your content, can be markup or markdown -->
</Disclosure>

You can nest the Disclosure component with the built-in Starlight <Tabs> component. This is helpful when displaying multiple related code snippets.

import { Tabs, TabItem } from '@astrojs/starlight/components'


<Disclosure toggleText="Show code snippets" client:load>
   <Tabs>
      <TabItem label='Request'>
      ```bash
      GET /alice HTTP/1.1
      Accept: application/json
      Host: wallet.example
      ```
      </TabItem>
      <TabItem label='Response'>
      ```bash
      HTTP/1.1 200 Success
      Content-Type: application/json


      {
         "id":"https://wallet.example/alice",
         "assetCode":"USD",
         "assetScale":2,
         "authServer":"https://wallet.example/auth",
      }
      ```
      </TabItem>


   </Tabs>
</Disclosure>

Working examples

Simple hidden text

Just some text that does not need to be seen on first load

Combination of disclosures, tabs, and code blocks

Terminal window
GET /alice HTTP/1.1
Accept: application/json
Host: wallet.example