Skip to main content

​
Anatomy

The Overflow consists of three primary elements that work together to manage content that exceeds available space.
Anatomy of the Overflow component
  1. Content area - The scrollable container that holds the overflow content
  2. Expand button (Optional) - A button that appears when truncation is enabled, allowing users to expand or collapse content

​
Options

The Overflow supports the following configurations to accommodate various content overflow scenarios.

​
Direction

Overflow supports both vertical and horizontal scrolling. Vertical scrolling is the default, suitable for most content that exceeds available height. Horizontal scrolling displays content in a row layout, useful for wide content that exceeds available width.

​
Truncation

When truncation is enabled, Overflow displays a “Show more…” button when content exceeds the visible area. Users can expand to view full content or collapse to return to the truncated view. Truncation is only available when direction is set to column. Custom expand and collapse text can be configured, along with optional callbacks for expand and collapse events.

​
Behavior

The Overflow responds to content overflow with scrollable areas and visual indicators that adapt to the scroll position.

​
Scrollable content

The content area becomes scrollable when content exceeds the specified height or width. Users can scroll using mouse, touch, or keyboard navigation. The scrollable area maintains focus for keyboard accessibility, allowing users to navigate through overflow content using arrow keys.

​
Usage Guidelines

​
Alternatives

​
Overflow vs Details

Overflow provides scrollable areas for content that exceeds space, while Details provides collapsible sections for showing or hiding supplementary information. Use Overflow when content must remain accessible through scrolling. Use Details when content can be completely hidden until the user chooses to reveal it.

​
Content

Content within the Overflow should be structured to work effectively within scrollable or expandable containers. Ensure that important information appears early in the content when truncation is enabled, as users may not expand to view all content.

​
Keyboard Interaction

Users can navigate the Overflow using standard keyboard controls.
Last modified on October 12, 2026