Astryx Design System

Overflow List@astryxdesign/core v0.0.15 · OverflowList

Usage

A horizontal list that automatically hides items when they exceed the available width. Use OverflowList for breadcrumbs, toolbars, tag lists, or any row that needs to collapse gracefully at smaller sizes.

ts
import {OverflowList} from '@astryxdesign/core/OverflowList'

Best practices

Guidance	Practices
Do	Provide a meaningful overflowRenderer: a "+N more" badge, a dropdown, or a count indicator.
Do	Set minVisibleItems to keep key items visible regardless of container size.
Don't	Use OverflowList for vertical layouts; it only works with horizontal rows.

Examples

Common configurations, variations, and states.

OverflowList — Collapse From Start

Overflow list that hides items from the start, keeping the latest visible

OverflowList — Badge Tags

Resizable row of badges that collapses into a count badge on overflow

OverflowList — Dropdown Actions

Action toolbar that collapses overflow buttons into a dropdown menu