Skip to contentSkip to navigationSkip to topbar
Figma
Star

Summary Detail

Version 1.0.0GithubStorybookDesign assets pendingPeer review pending

A Summary Detail is a collapsible container that can be used to hide or show content.

Installation

Installation page anchor
yarn add @twilio-paste/summary-detail - or - yarn add @twilio-paste/core
import {
  SummaryDetail,
  SummaryDetailContent,
  SummaryDetailHeading,
  SummaryDetailHeadingContent,
  SummaryDetailToggleButton,
} from '@twilio-paste/core/summary-detail';
import {Text} from '@twilio-paste/core/text';

const SummaryDetailExample = () => {
  return (
    <SummaryDetail>
      <SummaryDetailHeading>
        <SummaryDetailToggleButton />
        <SummaryDetailHeadingContent>
            Inbound Call
        </SummaryDetailHeadingContent>
      </SummaryDetailHeading>
      <SummaryDetailContent>
        <Text as="p">This is the content of the summary detail.</Text>
      </SummaryDetailContent>
    </SummaryDetail>
  );
};

SummaryDetail

SummaryDetail page anchor

element

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

Type
string
Default
'SUMMARY_DETAIL'

state

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

Type
SummaryDetailStateReturn

element

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

Type
string
Default
'SUMMARY_DETAIL_HEADING'

SummaryDetailHeadingContent

SummaryDetailHeadingContent page anchor

element

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

Type
string
Default
'SUMMARY_DETAIL_HEADING_CONTENT'

SummaryDetailToggleButton

SummaryDetailToggleButton page anchor

element

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

Type
string
Default
'SUMMARY_TOGGLE_BUTTON'

element

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

Type
string
Default
'SUMMARY_DETAIL_CONTENT'