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

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

Usage

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

Props

Props page anchor

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

SideModalButton

SideModalButton page anchor

variant RequiredRequired

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'

SideModalHeader

SideModalHeader page anchor

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

SideModalHeading

SideModalHeading page anchor

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

SideModalContainer

SideModalContainer page anchor

state

Returned state from useSideModalState hook

Type
PopoverStateReturn

SideModalStateReturn

SideModalStateReturn page anchor

animated RequiredRequired

If true, animating will be set to true when visible is updated. It'll wait for stopAnimation to be called or a CSS transition ends. If animated is set to a number, stopAnimation will be called only after the same number of milliseconds have passed.

Type
number | boolean

animating RequiredRequired

Whether it's animating or not.

Type
boolean

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type
string

hide RequiredRequired

Changes the visible state to false

Type
() => void

modal RequiredRequired

Toggles Dialog's modal state.

  • Non-modal: preventBodyScroll doesn't work and focus is free.
  • Modal: preventBodyScroll is automatically enabled, focus is trapped within the dialog and the dialog is rendered within a Portal by default.

Type
boolean

place RequiredRequired

Change the placement state.

Type
Dispatch<SetStateAction<Placement>>

placement RequiredRequired

Actual placement.

Type
Placement

setAnimated RequiredRequired

Sets animated.

Type
Dispatch<SetStateAction<number | boolean>>

setBaseId RequiredRequired

Sets baseId.

Type
Dispatch<SetStateAction<string>>

setModal RequiredRequired

Sets modal.

Type
Dispatch<SetStateAction<boolean>>

setVisible RequiredRequired

Sets visible.

Type
Dispatch<SetStateAction<boolean>>

show RequiredRequired

Changes the visible state to true

Type
() => void

stopAnimation RequiredRequired

Stops animation. It's called automatically if there's a CSS transition.

Type
() => void

toggle RequiredRequired

Toggles the visible state

Type
() => void

unstable_arrowRef RequiredRequired

The arrow element.

Type
RefObject<HTMLElement | null>

unstable_arrowStyles RequiredRequired

Arrow styles.

Type
CSSProperties

unstable_disclosureRef RequiredRequired

Type
MutableRefObject<HTMLElement | null>

unstable_idCountRef RequiredRequired

Type
MutableRefObject<number>

unstable_originalPlacement RequiredRequired

placement passed to the hook.

Type
Placement

unstable_popoverRef RequiredRequired

The popover element.

Type
RefObject<HTMLElement | null>

unstable_popoverStyles RequiredRequired

Popover styles.

Type
CSSProperties

unstable_referenceRef RequiredRequired

The reference element.

Type
RefObject<HTMLElement | null>

unstable_update RequiredRequired

Type
() => boolean

visible RequiredRequired

Whether it's visible or not.

Type
boolean

SideModalBody

SideModalBody page anchor

element

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

Type
string
Default
SIDE_MODAL_BODY

SideModalFooter

SideModalFooter page anchor

element

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

Type
string
Default
SIDE_MODAL_FOOTER

SideModalFooterActions

SideModalFooterActions page anchor

element

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

Type
string
Default
SIDE_MODAL_FOOTER_ACTIONS

justifyContent

Sets the justify-content CSS property.

Type
JustifyOptions