Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Side Panel

Version 1.0.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
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>
  );
};

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'

variant RequiredRequired

Type
| "default" | "neutral" | "warning" | "error" | "success" | "new" | "subaccount" | "decorative10" | "decorative20" | "decorative30" | "decorative40" | "brand10" | "brand20" | "brand30" | "neutral_counter" | "error_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

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