Scrollable

The scrollable component is a container for long form content, such as terms of service, that allows for scrolling so merchants can expose more text as they read.

Examples

Use when you need to make a region within the page independently scrollable. It’s often used in modals and other panes where it’s helpful to provide an extra visual cue that content exists below or above the fold.

Drag to resize example

Props

children
React.ReactNode
Content to display in scrollable area
hint
boolean
Slightly hints content upon mounting when scrollable
horizontal
boolean
Scroll content horizontally
shadow
boolean
Add a shadow when content is scrollable
vertical
boolean
Scroll content vertically
onScrolledToBottom
() => void
Called when scrolled to the bottom of the scroll area

Best practices

Scrollable containers should:

  • Be used when it’s helpful to provide an extra visual cue to let merchants know that content exists below or above the fold
  • Only be used for length text such as terms of service or other legal disclaimers and never for instructional or action-oriented text

Content guidelines

Scrollable containers are cards with scrolling functionality, and should follow the content guidelines for cards.