yarn add @twilio-paste/side-modal - or - yarn add @twilio-paste/core
import {
SideModal,
SideModalBody,
SideModalButton,
SideModalContainer,
SideModalHeader,
SideModalHeading,
} from '@twilio-paste/core/side-modal';
const SideModalExample: React.FC = () => {
return (
<SideModalContainer>
<SideModalButton variant="primary">Open dialog</SideModalButton>
<SideModal aria-label="My Dialog">
<SideModalHeader>
<SideModalHeading>Dialog header</SideModalHeading>
</SideModalHeader>
<SideModalBody>Dialog content</SideModalBody>
</SideModal>
</SideModalContainer>
);
};
aria-label RequiredRequired
Title of the dialog for screen readers.
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDE_MODAL
hideOnEsc
Set to false to disable closing the SideModal when the "Escape" key is pressed.
- Type
boolean- Default
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
The element the SideModalButton will render
- Type
any- Default
SIDE_MODAL_BUTTON
id
The id of the SideModal that the button controls
- Type
string
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
any- Default
SIDE_MODAL_HEADER
i18nDismissLabel
The dismiss button text label
- Type
string- Default
close
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.
as
The element the SideModalHeading will render
- Type
"h1" | "h2" | "h3" | "h4" | "h5" | "h6"- Default
h2
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDE_MODAL_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.
state
Returned state from useSideModalState hook
- Type
any
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.
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
any- Default
SIDE_MODAL_BODY
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
any- Default
SIDE_MODAL_FOOTER
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
any- Default
SIDE_MODAL_FOOTER_ACTIONS
justifyContent
Sets the justify-content CSS property.
- Type
JustifyOptions
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.