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

Side Modal

Version 4.1.1GithubStorybookPeer review pending

A modal that stays on the side of the screen.

Installation

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

SideModal

SideModal page anchor

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

hideOnEsc

Set to false to disable closing the SideModal when the "Escape" key is pressed.

Type
boolean
Default

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.

The element the SideModalButton will render

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)'

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

type

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

Type
ButtonTypes
Default
'button'

element

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

Type
string
Default
SIDE_MODAL_HEADER

i18nDismissLabel

The dismiss button text label

Type
string
Default
close

as

The element the SideModalHeading will render

Type
"h1" | "h2" | "h3" | "h4" | "h5" | "h6"
Default
h2

display

Responsive style prop of CSS display values

Type
| Display | (Display | null | undefined)[] | { [x: string]: Display | undefined; [x: number]: Display | undefined }

element

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

Type
string
Default
SIDE_MODAL_HEADING

id

Same as the HTML id attribute.

Type
string