OverflowAction

Define an action in OverflowActions that moves between a toolbar and its More menu as space changes.

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 OverflowAction for one action inside OverflowActions, with a stable identity. Use Separator for structural dividers rather than treating a divider as an executable action.

A direct child declares as="item" and provides a unique id and a readable label.
children replaces only the visible button content. The overflow menu still takes its label and icon from the corresponding props.
For a dedicated control, provide control as a Snippet and connect its run callback to that control’s onclick. The menu executes the same action; bind state through the dedicated control’s public API.

Import

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

Usage

API Reference

Property	Type	Default	Example	Description
`id`	`string`	`required`	`id="example"`	Stable action identifier, unique within the group.
`label`	`string`	`required`	`label="Example"`	Visible button and menu text, and the accessible name for an icon-only button.
`icon`	`OverflowActionIcon`	`—`	`icon={value}`	Resource icon name or custom icon; the menu reuses the same content.
`disabled`	`boolean`	`false`	`disabled`	Disable both the visible button and its corresponding MenuItem.
`href`	`string`	`—`	`href="/components"`	Render a link while visible and navigate to the same address when activated from the menu.
`iconOnly`	`boolean`	`false`	`iconOnly`	Show only the icon in the built-in visible Button, using label as its accessible name. The menu still shows label.
`onclick`	`(event?: MouseEvent) => void`	`—`	`onclick={(value) => { /* handle value */ }}`	Action callback shared by the visible button and overflow menu.
`children`	`Snippet`	`—`	`<OverflowAction>Content</OverflowAction>`	Replace visible button content. The menu still takes label and icon from the explicit props; the default is Icon plus label.
`control`	`Snippet<[(event?: MouseEvent) => void, boolean]>`	`—`	`control={controlContent}`	Replace the visible Button with a dedicated control. The Snippet receives run and the final disabled value; wire them to the control’s actual onclick and disabled. The menu still executes onclick. The component measures the dedicated control directly instead of cloning a hidden stateful instance.
`parts`	`ComponentPartsOf<{ Button: typeof Button }>`	`—`	`parts={partsOptions}`	Configure this action’s built-in Button. Direct Button props take priority, followed by this setting, then parent group defaults. The parent does not use it to infer the More button style.
`as`	`string`	`—`	`as="Example"`	Set to "item" for a direct OverflowActions child so it registers measurement, overflow behavior, and menu execution. An unregistered action cannot participate in the parent’s responsive action management.