OverflowActions

Keep actions accessible in limited space by moving those that do not fit into a More menu.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use OverflowActions when a group of actions should move into a More menu as available width shrinks. Compose OverflowAction and Separator; keep width measurement and menu allocation inside the component.

items contains action or separator entries with unique IDs. Explicit children replaces items.
For explicit composition, use OverflowAction as="item" and Separator as="separator". compact, overflow, and overflowFrom control how actions are moved.

Import

import { OverflowActions } from '@snowui-design-system/components';

Usage

Compact to icons

Hide all buttons

Hide from start

Hide from end

Responsive separators

Start-aligned menu

End-aligned menu

API Reference

Property	Type	Default	Example	Description
`items`	`OverflowActionsItem[]`	`[]`	`items={items}`	Built-in actions and separators with unique IDs. Actions support label, icon, disabled, href, target, rel, onAction, buttonProps, and parts; explicit children replace these items.
`compact`	`"auto" \| "none"`	`"auto"`	`compact="auto"`	auto hides every action label together before moving actions, if width is short and all actions have both icon and label. none skips label hiding and moves actions according to overflow.
`overflow`	`"all" \| "progressive"`	`—`	`overflow="all"`	all moves every action into More when they do not fit. progressive moves actions one by one according to overflowFrom and keeps those that fit. Layout is frozen while the menu is open.
`overflowFrom`	`"start" \| "end"`	`"end"`	`overflowFrom="start"`	In progressive mode, move actions from the start or end of data or composition order. all mode does not distinguish direction.
`availableWidth`	`number`	`—`	`availableWidth={42}`	Externally supplied width in pixels for the action group. Disables its own size observation; useful when DataTable provides a column width.
`maxVisible`	`number`	`—`	`maxVisible={42}`	Maximum directly visible actions, excluding More and separators; omitted or non-finite means no limit. Finite values are floored and clamped to zero. Width can overflow more actions; an open menu freezes layout.
`moreLabel`	`string`	`—`	`moreLabel="Example"`	Accessible name of the More button. Defaults to a LocaleProvider message.
`align`	`"start" \| "end"`	`"end"`	`align="start"`	Horizontal alignment of the Listbox menu.
`disabled`	`boolean`	`false`	`disabled`	Disable all actions.
`buttonProps`	`GlobalButtonProps`	`—`	`buttonProps={value}`	Shared default Button Props for actions, More, and hidden measurement copies. Supports variant, size, bare, emphasis, class, and style. The group owns content, role, click, link, disabled, and name fields.
`children`	`Snippet`	`—`	`<OverflowActions>Content</OverflowActions>`	Direct OverflowAction as="item" and Separator as="separator" children in place of items data. Structural separators are not independent overflow candidates.
`parts`	`Parts`	`—`	`parts={partsOptions}`	Configure generated Button, SelectButton, Listbox, MenuItem, and Separator. More uses parts.SelectButton ahead of group-level parts.Button; the public Parts contract defines the full precedence.
`onAction`	`(event: OverflowActionsActionEvent) => void`	`—`	`onAction={(value) => { /* handle value */ }}`	Called after an action with stable id, source (button or menu), matching built-in item when available, and optional original mouse event.