Scroll Bar
Last Updated on Sep 29, 2022
An affordance to show when content is larger than the visible container.
Component Variants
Design Principles
- Use a scroll bar whenever a container has a set height or width and the content will overflow that container. It is acceptable to set the height or width, but it should be done with caution. Most containers will not have set heights or widths. They will be variable depending on the container and screen size.
- Whenever possible, show content being cut off to alert the user that the area is scrollable.
- If you’re setting a height or width choose one of the layout design tokens as the height or width. This will align to our grid system and give us a rhythm spatially.
Related Components