Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Side Panel

Version 1.2.0GithubStorybookPeer review pending

Side Panel is a container that pushes the main page content when open.

Installation

Installation page anchor
yarn add @twilio-paste/side-panel - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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>
  );
};

Props

Props page anchor

SidePanelButton

SidePanelButton page anchor

variant RequiredRequired

The different appearance variants for a button. Avoid using link variants when possible.

Type
| "link" | "reset" | "primary" | "primary_icon" | "secondary" | "secondary_icon" | "destructive" | "destructive_icon" | "destructive_link" | "destructive_secondary" | "inverse_link" | "inverse"
Default
'primary'

disabled

Prevent actions from firing on this Button

Type
boolean

element

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

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

Type
string
Default
'BUTTON'

fullWidth

Sets the Button width to 100% of the parent container.

Type
boolean

href

A URL to route to. Must use as="a" for this prop to work.

Type
string
Default
null

i18nExternalLinkLabel

Title for showExternal icon

Type
string
Default
'(link takes you to an external page)'

id

Type
string

loading

Prevent actions and show a loading spinner

Type
boolean

pressed

Sets the aria-pressed attribute. Must be used with 'secondary' or 'secondary_icon' variants.

Type
boolean

size

Type
ButtonSizes
Default
'default'

tabIndex

Type
ButtonTabIndexes

target

Type
string

toggle

Type
() => void

type

Use at least one submit button per <form>. Outside of forms use button (default).

Type
ButtonTypes
Default
'button'

SidePanelBadgeButton

SidePanelBadgeButton page anchor

variant RequiredRequired

Type
| "default" | "neutral" | "warning" | "error" | "success" | "new" | "subaccount" | "decorative10" | "decorative20" | "decorative30" | "decorative40" | "brand10" | "brand20" | "brand30" | "neutral_counter" | "error_counter" | "notification_counter" | "info"
Default
null

element

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

Type
string
Default
BADGE

href

Type
never

id

Type
string

onClick

Type
MouseEventHandler<HTMLButtonElement>

size

Type
BadgeSizes
Default
default

toggle

Type
() => void

SidePanel

SidePanel page anchor

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
string
Default
SIDE_PANEL

SidePanelPushContentWrapper

SidePanelPushContentWrapper page anchor

element

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

Type
string
Default
SIDE_PANEL_PUSH_CONTENT_WRAPPER

SidePanelHeader

SidePanelHeader page anchor

element

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

Type
string
Default
SIDE_PANEL_HEADER

SidePanelHeaderActions

SidePanelHeaderActions page anchor

element

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

Type
string
Default
SIDE_PANEL_HEADER_ACTIONS

SidePanelContainer

SidePanelContainer page anchor

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
string
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

SidePanelBody

SidePanelBody page anchor

element

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

Type
string
Default
SIDE_PANEL_BODY

SidePanelFooter

SidePanelFooter page anchor

element

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

Type
string
Default
SIDE_PANEL_FOOTER

justifyContent

Sets the justify-content CSS property.

Type
"flex-start" | "flex-end" | "space-between"
Default
flex-start

variant

Variant of the Side Panel Footer. When using Side Panel in an AI Chat context, use the "chat" variant to wrap the Chat Composer component.

Type
"default" | "chat"
Default
default