Overflow scroll button
Applied to the Horizontal component when labels are too long and get cut off. There's no specific breakpoint for when a Scroll button appears, it depends on the number of labels and the character count of each label.
Quick links
Styles and interactions
Horizontal, light context
https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/d334e6a9-c875-4ed3-90da-2cd9f60a31a2/Open-Tabs-horizontal-overflow-light-theme

Angle or arrow styles
- Default and Focus: #151515
- Hover and Active/Pressed: #06c
- Disabled: #d2d2d2
- Pipe/divider: #d2d2d2
Button BG styles
- Adopts whatever the BG color is that the component is placed on
Default

Focus

- The Scroll button can't be focused, only each individual Tab in the tab order instead
Hover

Active/Pressed

Horizontal, dark context
https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/68c6d18d-354c-4a2d-9f6f-228c28b25fd0/Open-Tabs-horizontal-overflow-dark-theme

Angle or arrow styles
- Default and Focus: #fff
- Hover and Active/Pressed: #73bcf7
- Disabled: #6a6e73
- Pipe/divider: #6a6e73
Default

Focus

- The Scroll button can't be focused, only each individual Tab in the tab order instead
Hover

Active/Pressed

Interactivity
Default state
- Text labels or Tabs are organized from left to right
- When Overflow buttons appear, the left button is disabled and the right button is active
Active/Pressed
- When the right Overflow button is clicked on or pressed, text labels or Tabs move from right to left
- When the left Overflow button is clicked on or pressed, text labels or Tabs move from left to right
Tab order

- As a user presses the Tab key, the focus indicator will move from left to right outlining all Tabs until it reaches the end of the tab order where the Overflow button will become disabled
Overflow scroll button
Quick links
Styles and interactions
Horizontal, light context
https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/d334e6a9-c875-4ed3-90da-2cd9f60a31a2/Open-Tabs-horizontal-overflow-light-theme
Angle or arrow styles
Button BG styles
Default

Focus

Hover

Active/Pressed

Horizontal, dark context
https://xd.adobe.com/spec/3e62e93c-8338-4f31-5040-3b81f0ed5c71-4853/screen/68c6d18d-354c-4a2d-9f6f-228c28b25fd0/Open-Tabs-horizontal-overflow-dark-themeAngle or arrow styles
Default

Focus

Hover

Active/Pressed

Interactivity
Default state
Active/Pressed
Tab order