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>
);
};
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
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
animated
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
baseId
ID that will serve as a base for all the items IDs.
- Type
string
visible
Whether it's visible or not.
- Type
boolean
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
string- Default
'SUMMARY_DETAIL_HEADING'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
string- Default
'SUMMARY_DETAIL_HEADING_CONTENT'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
string- Default
'SUMMARY_TOGGLE_BUTTON'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
about
- Type
string
accessKey
- Type
string
aria-activedescendant
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
- Type
string
aria-atomic
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
- Type
Booleanish
aria-autocomplete
Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
- Type
"list" | "none" | "inline" | "both"
aria-busy
Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
- Type
Booleanish
aria-checked
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
- Type
boolean | "true" | "false" | "mixed"
aria-colcount
Defines the total number of columns in a table, grid, or treegrid.
- Type
number
aria-colindex
Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
- Type
number
aria-colspan
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
- Type
number
aria-controls
Identifies the element (or elements) whose contents or presence are controlled by the current element.
- Type
string
aria-current
Indicates the element that represents the current item within a container or set of related elements.
- Type
| boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"
aria-describedby
Identifies the element (or elements) that describes the object.
- Type
string
aria-details
Identifies the element that provides a detailed, extended description for the object.
- Type
string
aria-disabled
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
- Type
Booleanish
aria-dropeffect
Indicates what functions can be performed when a dragged object is released on the drop target.
- Type
"link" | "none" | "copy" | "execute" | "move" | "popup"
aria-errormessage
Identifies the element that provides an error message for the object.
- Type
string
aria-expanded
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
- Type
Booleanish
aria-flowto
Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
- Type
string
aria-grabbed
Indicates an element's "grabbed" state in a drag-and-drop operation.
- Type
Booleanish
aria-haspopup
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
- Type
| boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"
aria-hidden
Indicates whether the element is exposed to an accessibility API.
- Type
Booleanish
aria-invalid
Indicates the entered value does not conform to the format expected by the application.
- Type
boolean | "true" | "false" | "grammar" | "spelling"
aria-keyshortcuts
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
- Type
string
aria-label
Defines a string value that labels the current element.
- Type
string
aria-labelledby
Identifies the element (or elements) that labels the current element.
- Type
string
aria-level
Defines the hierarchical level of an element within a structure.
- Type
number
aria-live
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
- Type
"off" | "assertive" | "polite"
aria-modal
Indicates whether an element is modal when displayed.
- Type
Booleanish
aria-multiline
Indicates whether a text box accepts multiple lines of input or only a single line.
- Type
Booleanish
aria-multiselectable
Indicates that the user may select more than one item from the current selectable descendants.
- Type
Booleanish
aria-orientation
Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
- Type
"horizontal" | "vertical"
aria-owns
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
- Type
string
aria-placeholder
Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
- Type
string
aria-posinset
Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
- Type
number
aria-pressed
Indicates the current "pressed" state of toggle buttons.
- Type
boolean | "true" | "false" | "mixed"
aria-readonly
Indicates that the element is not editable, but is otherwise operable.
- Type
Booleanish
aria-relevant
Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
- Type
| "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
aria-required
Indicates that user input is required on the element before a form may be submitted.
- Type
Booleanish
aria-roledescription
Defines a human-readable, author-localized description for the role of an element.
- Type
string
aria-rowcount
Defines the total number of rows in a table, grid, or treegrid.
- Type
number
aria-rowindex
Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
- Type
number
aria-rowspan
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
- Type
number
aria-selected
Indicates the current "selected" state of various widgets.
- Type
Booleanish
aria-setsize
Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
- Type
number
aria-sort
Indicates if items in a table or grid are sorted in ascending or descending order.
- Type
"none" | "ascending" | "descending" | "other"
aria-valuemax
Defines the maximum allowed value for a range widget.
- Type
number
aria-valuemin
Defines the minimum allowed value for a range widget.
- Type
number
aria-valuenow
Defines the current value for a range widget.
- Type
number
aria-valuetext
Defines the human readable text alternative of aria-valuenow for a range widget.
- Type
string
autoCapitalize
- Type
string
autoCorrect
- Type
string
autoFocus
- Type
boolean
autoSave
- Type
string
className
- Type
string
contentEditable
- Type
Booleanish | "inherit"
contextMenu
- Type
string
dangerouslySetInnerHTML
- Type
{ __html: string }
datatype
- Type
string
defaultChecked
- Type
boolean
defaultValue
- Type
string | number | readonly string[]
dir
- Type
string
disabled
Same as the HTML attribute.
- Type
boolean
draggable
- Type
Booleanish
focusable
When an element is disabled, it may still be focusable. It works
similarly to readOnly on form elements. In this case, only
aria-disabled will be set.
- Type
boolean
form
- Type
string
formAction
- Type
string
formEncType
- Type
string
formMethod
- Type
string
formNoValidate
- Type
boolean
formTarget
- Type
string
hidden
- Type
boolean
id
- Type
string
inlist
- Type
any
inputMode
Hints at the type of data that might be entered by the user while editing the element or its contents
- Type
| "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"
is
Specify that a standard HTML element should behave like a defined custom built-in element
- Type
string
itemID
- Type
string
itemProp
- Type
string
itemRef
- Type
string
itemScope
- Type
boolean
itemType
- Type
string
key
- Type
Key
lang
- Type
string
name
- Type
string
nonce
- Type
string
onAbort
- Type
ReactEventHandler<any>
onAbortCapture
- Type
ReactEventHandler<any>
onAnimationEnd
- Type
AnimationEventHandler<any>
onAnimationEndCapture
- Type
AnimationEventHandler<any>
onAnimationIteration
- Type
AnimationEventHandler<any>
onAnimationIterationCapture
- Type
AnimationEventHandler<any>
onAnimationStart
- Type
AnimationEventHandler<any>
onAnimationStartCapture
- Type
AnimationEventHandler<any>
onAuxClick
- Type
MouseEventHandler<any>
onAuxClickCapture
- Type
MouseEventHandler<any>
onBeforeInput
- Type
FormEventHandler<any>
onBeforeInputCapture
- Type
FormEventHandler<any>
onBlur
- Type
FocusEventHandler<any>
onBlurCapture
- Type
FocusEventHandler<any>
onCanPlay
- Type
ReactEventHandler<any>
onCanPlayCapture
- Type
ReactEventHandler<any>
onCanPlayThrough
- Type
ReactEventHandler<any>
onCanPlayThroughCapture
- Type
ReactEventHandler<any>
onChange
- Type
FormEventHandler<any>
onChangeCapture
- Type
FormEventHandler<any>
onClick
- Type
MouseEventHandler<any>
onClickCapture
- Type
MouseEventHandler<any>
onCompositionEnd
- Type
CompositionEventHandler<any>
onCompositionEndCapture
- Type
CompositionEventHandler<any>
onCompositionStart
- Type
CompositionEventHandler<any>
onCompositionStartCapture
- Type
CompositionEventHandler<any>
onCompositionUpdate
- Type
CompositionEventHandler<any>
onCompositionUpdateCapture
- Type
CompositionEventHandler<any>
onContextMenu
- Type
MouseEventHandler<any>
onContextMenuCapture
- Type
MouseEventHandler<any>
onCopy
- Type
ClipboardEventHandler<any>
onCopyCapture
- Type
ClipboardEventHandler<any>
onCut
- Type
ClipboardEventHandler<any>
onCutCapture
- Type
ClipboardEventHandler<any>
onDoubleClick
- Type
MouseEventHandler<any>
onDoubleClickCapture
- Type
MouseEventHandler<any>
onDrag
- Type
DragEventHandler<any>
onDragCapture
- Type
DragEventHandler<any>
onDragEnd
- Type
DragEventHandler<any>
onDragEndCapture
- Type
DragEventHandler<any>
onDragEnter
- Type
DragEventHandler<any>
onDragEnterCapture
- Type
DragEventHandler<any>
onDragExit
- Type
DragEventHandler<any>
onDragExitCapture
- Type
DragEventHandler<any>
onDragLeave
- Type
DragEventHandler<any>
onDragLeaveCapture
- Type
DragEventHandler<any>
onDragOver
- Type
DragEventHandler<any>
onDragOverCapture
- Type
DragEventHandler<any>
onDragStart
- Type
DragEventHandler<any>
onDragStartCapture
- Type
DragEventHandler<any>
onDrop
- Type
DragEventHandler<any>
onDropCapture
- Type
DragEventHandler<any>
onDurationChange
- Type
ReactEventHandler<any>
onDurationChangeCapture
- Type
ReactEventHandler<any>
onEmptied
- Type
ReactEventHandler<any>
onEmptiedCapture
- Type
ReactEventHandler<any>
onEncrypted
- Type
ReactEventHandler<any>
onEncryptedCapture
- Type
ReactEventHandler<any>
onEnded
- Type
ReactEventHandler<any>
onEndedCapture
- Type
ReactEventHandler<any>
onError
- Type
ReactEventHandler<any>
onErrorCapture
- Type
ReactEventHandler<any>
onFocus
- Type
FocusEventHandler<any>
onFocusCapture
- Type
FocusEventHandler<any>
onGotPointerCapture
- Type
PointerEventHandler<any>
onGotPointerCaptureCapture
- Type
PointerEventHandler<any>
onInput
- Type
FormEventHandler<any>
onInputCapture
- Type
FormEventHandler<any>
onInvalid
- Type
FormEventHandler<any>
onInvalidCapture
- Type
FormEventHandler<any>
onKeyDown
- Type
KeyboardEventHandler<any>
onKeyDownCapture
- Type
KeyboardEventHandler<any>
onKeyPress
- Type
KeyboardEventHandler<any>
onKeyPressCapture
- Type
KeyboardEventHandler<any>
onKeyUp
- Type
KeyboardEventHandler<any>
onKeyUpCapture
- Type
KeyboardEventHandler<any>
onLoad
- Type
ReactEventHandler<any>
onLoadCapture
- Type
ReactEventHandler<any>
onLoadedData
- Type
ReactEventHandler<any>
onLoadedDataCapture
- Type
ReactEventHandler<any>
onLoadedMetadata
- Type
ReactEventHandler<any>
onLoadedMetadataCapture
- Type
ReactEventHandler<any>
onLoadStart
- Type
ReactEventHandler<any>
onLoadStartCapture
- Type
ReactEventHandler<any>
onLostPointerCapture
- Type
PointerEventHandler<any>
onLostPointerCaptureCapture
- Type
PointerEventHandler<any>
onMouseDown
- Type
MouseEventHandler<any>
onMouseDownCapture
- Type
MouseEventHandler<any>
onMouseEnter
- Type
MouseEventHandler<any>
onMouseLeave
- Type
MouseEventHandler<any>
onMouseMove
- Type
MouseEventHandler<any>
onMouseMoveCapture
- Type
MouseEventHandler<any>
onMouseOut
- Type
MouseEventHandler<any>
onMouseOutCapture
- Type
MouseEventHandler<any>
onMouseOver
- Type
MouseEventHandler<any>
onMouseOverCapture
- Type
MouseEventHandler<any>
onMouseUp
- Type
MouseEventHandler<any>
onMouseUpCapture
- Type
MouseEventHandler<any>
onPaste
- Type
ClipboardEventHandler<any>
onPasteCapture
- Type
ClipboardEventHandler<any>
onPause
- Type
ReactEventHandler<any>
onPauseCapture
- Type
ReactEventHandler<any>
onPlay
- Type
ReactEventHandler<any>
onPlayCapture
- Type
ReactEventHandler<any>
onPlaying
- Type
ReactEventHandler<any>
onPlayingCapture
- Type
ReactEventHandler<any>
onPointerCancel
- Type
PointerEventHandler<any>
onPointerCancelCapture
- Type
PointerEventHandler<any>
onPointerDown
- Type
PointerEventHandler<any>
onPointerDownCapture
- Type
PointerEventHandler<any>
onPointerEnter
- Type
PointerEventHandler<any>
onPointerEnterCapture
- Type
PointerEventHandler<any>
onPointerLeave
- Type
PointerEventHandler<any>
onPointerLeaveCapture
- Type
PointerEventHandler<any>
onPointerMove
- Type
PointerEventHandler<any>
onPointerMoveCapture
- Type
PointerEventHandler<any>
onPointerOut
- Type
PointerEventHandler<any>
onPointerOutCapture
- Type
PointerEventHandler<any>
onPointerOver
- Type
PointerEventHandler<any>
onPointerOverCapture
- Type
PointerEventHandler<any>
onPointerUp
- Type
PointerEventHandler<any>
onPointerUpCapture
- Type
PointerEventHandler<any>
onProgress
- Type
ReactEventHandler<any>
onProgressCapture
- Type
ReactEventHandler<any>
onRateChange
- Type
ReactEventHandler<any>
onRateChangeCapture
- Type
ReactEventHandler<any>
onReset
- Type
FormEventHandler<any>
onResetCapture
- Type
FormEventHandler<any>
onResize
- Type
ReactEventHandler<any>
onResizeCapture
- Type
ReactEventHandler<any>
onScroll
- Type
UIEventHandler<any>
onScrollCapture
- Type
UIEventHandler<any>
onSeeked
- Type
ReactEventHandler<any>
onSeekedCapture
- Type
ReactEventHandler<any>
onSeeking
- Type
ReactEventHandler<any>
onSeekingCapture
- Type
ReactEventHandler<any>
onSelect
- Type
ReactEventHandler<any>
onSelectCapture
- Type
ReactEventHandler<any>
onStalled
- Type
ReactEventHandler<any>
onStalledCapture
- Type
ReactEventHandler<any>
onSubmit
- Type
FormEventHandler<any>
onSubmitCapture
- Type
FormEventHandler<any>
onSuspend
- Type
ReactEventHandler<any>
onSuspendCapture
- Type
ReactEventHandler<any>
onTimeUpdate
- Type
ReactEventHandler<any>
onTimeUpdateCapture
- Type
ReactEventHandler<any>
onTouchCancel
- Type
TouchEventHandler<any>
onTouchCancelCapture
- Type
TouchEventHandler<any>
onTouchEnd
- Type
TouchEventHandler<any>
onTouchEndCapture
- Type
TouchEventHandler<any>
onTouchMove
- Type
TouchEventHandler<any>
onTouchMoveCapture
- Type
TouchEventHandler<any>
onTouchStart
- Type
TouchEventHandler<any>
onTouchStartCapture
- Type
TouchEventHandler<any>
onTransitionEnd
- Type
TransitionEventHandler<any>
onTransitionEndCapture
- Type
TransitionEventHandler<any>
onVolumeChange
- Type
ReactEventHandler<any>
onVolumeChangeCapture
- Type
ReactEventHandler<any>
onWaiting
- Type
ReactEventHandler<any>
onWaitingCapture
- Type
ReactEventHandler<any>
onWheel
- Type
WheelEventHandler<any>
onWheelCapture
- Type
WheelEventHandler<any>
placeholder
- Type
string
prefix
- Type
string
property
- Type
string
radioGroup
- Type
string
ref
- Type
((instance: any) => void) | RefObject<any>
resource
- Type
string
results
- Type
number
role
- Type
AriaRole
security
- Type
string
slot
- Type
string
spellCheck
- Type
Booleanish
style
- Type
CSSProperties
suppressContentEditableWarning
- Type
boolean
suppressHydrationWarning
- Type
boolean
title
- Type
string
translate
- Type
"yes" | "no"
type
- Type
"button" | "submit" | "reset"
typeof
- Type
string
unselectable
- Type
"on" | "off"
unstable_clickOnEnter
Whether or not trigger click on pressing Enter.
- Type
boolean
unstable_clickOnSpace
Whether or not trigger click on pressing Space.
- Type
boolean
unstable_system
Options passed to reakit-system-*
- Type
any
value
- Type
string | number | readonly string[]
visible
Whether it's visible or not.
- Type
boolean
vocab
- Type
string
wrapElement
Function returned by the hook to wrap the element to which html props will be passed.
- Type
(element: ReactNode) => ReactNode
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
string- Default
'SUMMARY_DETAIL_CONTENT'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.