yarn add @twilio-paste/side-panel - or - yarn add @twilio-paste/core
import {
SidePanelContainer,
SidePanel,
SidePanelHeader,
SidePanelHeaderActions,
SidePanelBody,
SidePanelPushContentWrapper,
SidePanelButton,
} from '@twilio-paste/core/side-panel';
const SideModalExample: React.FC = () => {
const [isOpen, setIsOpen] = React.useState(true);
return (
<SidePanelContainer isOpen={isOpen} setIsOpen={setIsOpen}>
<SidePanel>
<SidePanelHeader>
Heading goes here.
<SidePanelHeaderActions>
Actions go here.
</SidePanelHeaderActions>
</SidePanelHeader>
<SidePanelBody>
Side Panel content goes here.
</SidePanelBody>
</SidePanel>
<SidePanelPushContentWrapper>
<SidePanelButton variant="secondary">Toggle Side Panel</SidePanelButton>
</SidePanelPushContentWrapper>
</SidePanelContainer>
);
};
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'SIDE_PANEL_BUTTON'
id
- Type
string
toggle
- Type
() => void
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_PANEL_BADGE'
id
- Type
string
toggle
- Type
() => void
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.
label RequiredRequired
Accessible label for the Side Panel
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDE_PANEL
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_PANEL_PUSH_CONTENT_WRAPPER
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_PANEL_HEADER
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_PANEL_HEADER_ACTIONS
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.
isOpen RequiredRequired
State for the Side Panel. Determines whether the Side Panel is open or closed.
- Type
boolean
setIsOpen RequiredRequired
Sets the state of the Side Panel between open and closed.
- Type
Dispatch<SetStateAction<boolean>>
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
SIDE_PANEL_CONTAINER
i18nCloseSidePanelTitle
Accessible title for the close Side Panel button for non-english languages
- Type
string- Default
close the side panel
i18nOpenSidePanelTitle
Accessible title for the open Side Panel button for non-english languages
- Type
string- Default
open the side panel
sidePanelId
Id for the Side Panel. Gets passed to the aria-controls attribute of the Side Panel Button for accessibility. A unique ID will be created if nothing is passed.
- 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_PANEL_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.