Components · Content
Scrollbar
A styled scrollbar for elements whose content overflows a fixed height — most often a modal.
Figma source: Scrollbar ↗Examples
Soil microbial communities respond to seasonal moisture cycles in ways that current models do not capture.
This study will sample twelve sites across three ecoregions at fortnightly intervals for thirty-six months.
Sequencing will target the 16S rRNA gene, with shotgun metagenomics on a subset of samples.
Data will be deposited in the institutional repository within twelve months of collection.
A data management plan is attached as a supplementary document.
<div class="cds-scroll" style="height: 140px">…</div>Usage
Original Figma description & what changed
From Figma: The scrollbar is used for scrolling inside of elements that have overflowing content. The browser a user is using has it's own scrollbar for the entire page, but for certain elements, most commonly modals, where the content (text, forms, etc.) will not fit within the fixed size of the element, a Scrollbar will be displayed on the right side of the content (with padding). The scrollbar should remain visible. Like any other scrollbar, the dark grey is the part of the component that controls the scroll and shows in the scrollable area where the user is.
What changed: Same rules, a third the length. Removed the explanation of what a scrollbar is — the audience knows — and kept the two decisions the original actually makes: it is for fixed-height elements rather than the page, and it stays visible. Added why that second rule matters, since it is the one that gets overridden.
When to use it
- Use for fixed-height regions whose content overflows — modal bodies, long dropdowns, side panels.
- Keep the scrollbar permanently visible, as the Figma description requires.
- Leave padding between the content and the scrollbar so text does not run under the thumb.
When not to use it
- Do not style the main page scrollbar; leave the browser’s alone.
- Do not use overlay scrollbars that appear only on scroll — the user cannot tell there is more content.
- Do not scroll horizontally and vertically in the same region unless it is a data grid.
A hidden-until-scrolled scrollbar removes the only cue that content continues below
the fold. Users with limited working memory, users on trackpads that never show a
persistent bar, and anyone scanning quickly will simply not know there is more. This is
also why a scrollable region needs tabindex="0" — otherwise a keyboard
user cannot scroll it at all without a focusable element inside.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--scrollbar-track | Track | --color-gray-200 → #eeeeee |
--scrollbar-thumb | Thumb | --color-gray-300 → #cccccc |
--radius-5 | Track and thumb radius | 5px |