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

• Horizontal, light context
• Horizontal, dark context
• Interactivity

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