Skip to content
GitHub

Disclosure

Use this component if you have some content that you want to show/hide via a collapsible container. This component wraps around whatever content you wish to have this expand/collapse behaviour. Note that the client:load attribute is required for the functionality to work because this component uses Javascript for interactivity.

To use it, your docs page must be in .mdx format. Please 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