Scroll Bar

Overview

Scroll Bar provides a styled scrolling indicator for custom scroll containers, panels, and overflow areas. With 2 appearances, 3 sizes, and both directions, it gives precise control over how scrollable regions are communicated, keeping the scroll experience consistent with the rest of the design system rather than relying on browser defaults.

When should you use them?

Use a scroll bar to style scrollable regions, like data tables, dropdowns, panels, or any overflow container, so the scroll experience matches your design system instead of the browser's default. Use the Filled style when the scrollbar should be clearly visible, and Ghost when it should stay subtle.

How should you use them?

• Use it to style scroll regions consistently; style only the appearance, never replace native scroll behavior.
• Use Filled for content-heavy panels where the scrollbar should be clearly visible.
• Use Ghost for subtle, overlaid scrollbars that fade into the background.
• Match the direction to the overflow axis: vertical for stacked content, horizontal for wide content.
• Keep the scrollbar discoverable so users know the region scrolls.
• Preserve keyboard, wheel, and touch scrolling so the region stays accessible.