Skip to contentSkip to navigationSkip to topbar
Figma
Star

Disclosure

Version 12.1.0GithubStorybookPeer review pending

A Disclosure is a collapsible accordion that gives hierarchy to a page.

Installation

Installation page anchor
yarn add @twilio-paste/disclosure - or - yarn add @twilio-paste/core
import {Disclosure, DisclosureHeading, DisclosureContent} from '@twilio-paste/core/disclosure';

const PopoverExample: React.FC = () => {
  return (
    <Disclosure>
      <DisclosureHeading as="h2" variant="heading20">
        Disclosure Heading
      </DisclosureHeading>
      <DisclosureContent>Disclosure content</DisclosureContent>
    </Disclosure>
  );
};

Disclosure

Disclosure page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DISCLOSURE'

state

Provide the Disclosure state returned from useDisclosureState if you want to control the state of the Disclosure.

Type
DisclosureStateReturn

variant

Changes the styling on the component based on the variant selected.

Type
DisclosureVariants
Default
'default'

as RequiredRequired

Type
AsTags

variant RequiredRequired

Type
HeadingVariants

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DISCLOSURE_HEADING'

marginBottom

Type
"space0"

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DISCLOSURE_CONTENT'

animated RequiredRequired

If true, animating will be set to true when visible is updated. It'll wait for stopAnimation to be called or a CSS transition ends. If animated is set to a number, stopAnimation will be called only after the same number of milliseconds have passed.

Type
number | boolean

animating RequiredRequired

Whether it's animating or not.

Type
boolean

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type
string

hide RequiredRequired

Changes the visible state to false

Type
() => void

setAnimated RequiredRequired

Sets animated.

Type
Dispatch<SetStateAction<number | boolean>>

setBaseId RequiredRequired

Sets baseId.

Type
Dispatch<SetStateAction<string>>

setVisible RequiredRequired

Sets visible.

Type
Dispatch<SetStateAction<boolean>>

show RequiredRequired

Changes the visible state to true

Type
() => void

stopAnimation RequiredRequired

Stops animation. It's called automatically if there's a CSS transition.

Type
() => void

toggle RequiredRequired

Toggles the visible state

Type
() => void

unstable_idCountRef RequiredRequired

Type
MutableRefObject<number>

visible RequiredRequired

Whether it's visible or not.

Type
boolean