OverflowAction handbook

v1.0.1 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Define one button action inside OverflowActions so it can move between the toolbar and the More menu as space changes.

When to use it

Use it as an action within OverflowActions with a stable identity. Use Separator for structural division, not as an executable action.

A direct child must declare as="item" and provide a unique id and readable label.
children replaces only the visible button content. The menu still uses label and icon when the action overflows.
For a dedicated control, use the control Snippet to replace the visible Button and connect its received run callback to the control’s onclick. The menu still invokes the action’s onclick; update switch state through the dedicated control’s public binding.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { OverflowAction, OverflowActions } from '@snowui-design-system/components';</script> <div style="display: flex; align-items: center; justify-content: center; width: 100%;">	<OverflowActions overflow="progressive" overflowFrom="end" availableWidth={250} moreLabel="More component actions" style="justify-content: center;">		<OverflowAction as="item" id="github" label="SnowUI on GitHub" icon="github-logo" href="https://github.com/SnowUI" />		<OverflowAction as="item" id="copy-import" label="Copy import" icon="copy" />		<OverflowAction as="item" id="publish" label="Publish docs" icon="upload" />	</OverflowActions></div>

API

Keyword	Type	Default	Description
id	`string`	`required`	Stable, unique action identifier within the group
label	`string`	`required`	Button label, menu label, and accessible name in icon-only mode
icon	`OverflowActionIcon`	—	Resource icon name or custom icon; the menu reuses it
disabled	`boolean`	`false`	Disables the visible button and corresponding MenuItem
href	`string`	—	Renders a link while visible; the menu navigates to the same URL
iconOnly	`boolean`	`false`	Built-in visible Button shows only the icon, using `label` as its accessible name; the menu still shows `label`
onclick	`(event?: MouseEvent) => void`	—	Action callback shared by the visible button and menu
children	`Snippet`	—	Overrides visible button content; the menu still uses explicit `label` and `icon` Props. Default: automatic Icon and label.
control	`Snippet<[(event?: MouseEvent) => void, boolean]>`	—	Replaces the visible Button with a dedicated control. The arguments are the `run` callback and effective `disabled` value, which must be wired to the control’s actual `onclick` and `disabled`. The menu still executes through `onclick`. The component measures the real control directly without duplicating a hidden stateful instance.
parts	`ComponentPartsOf<{ Button: typeof Button }>`	—	Configures this action’s built-in Button. Priority is below direct Button Props and above parent group defaults. The parent does not inspect this configuration to infer the More button style.
as	`string`	—	Must be `"item"` for a direct child of OverflowActions, registering it for measurement, overflow, and menu execution. An unregistered child cannot participate in the parent’s responsive action management.

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

API

OverflowAction can only be a direct child of OverflowActions. It keeps a transparent measurement wrapper so the parent can measure full and icon-only widths. The interactive host remains the real Button; no second button state machine is created.

control mode is for controls such as ColorSchemeButton and StyleButton that already own a Button host; it does not nest the control inside another Button. A click on the visible control calls run(event) first to notify the action group, then the control performs its own state change. In the More menu there is no visible-control click event, so onclick(undefined) should update state through the same public binding. icon and label always provide the menu content and readable name. compact="none" suits toolbars mixing dedicated controls. The existing control itself is measured. When overflowed it leaves layout and paint; if its width must be checked again, measurement temporarily restores that same control during one calculation without mounting a second control that reads or writes document state.

Links pass through Button’s target and rel. Visible links remain native. In More, a target other than _self opens a new window with forced noopener; an explicit noreferrer is preserved. Internal links navigate in the same window.

Parent OverflowActions buttonProps supplies group-level Button defaults. Direct Button-compatible Props on this OverflowAction take precedence; child parts.Button falls between them.

This section is protected. An AI must request user review before modifying it.

OverflowAction style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

This component source does not directly consume a registered component-specific override. Style composed children through public parts or an explicit child; do not guess variable names.

Design guide · Tokens · Composition boundaries

OverflowAction types and states

Required Props: id and label.

Bindable Props: this component declares no named two-way binding; handle state updates through public callbacks or its host.

Inherited declaration: Omit<ButtonProps, ControlledButtonKeys>. Consult the base component’s public documentation for inherited capabilities; fields excluded by Omit cannot be used as if inherited unchanged.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.

OverflowActionIcon

Source: components/src/logic/overflow-actions.svelte.ts

export type OverflowActionIcon = string | Snippet;

ComponentPartsOf

Source: components/src/logic/component-parts.svelte.ts

export type ComponentPartsOf<    T extends Record<string, Component<any>>,> = {    [K in keyof T]?: ConfigurableComponentPartProps<T[K]>;};

ConfigurableComponentPartProps

Source: components/src/logic/component-parts.svelte.ts

export type ConfigurableComponentPartProps<C extends Component<any>> = Partial<    Omit<ComponentProps<C>, ComponentPartControlledKey>>;

ComponentPartControlledKey

Source: components/src/logic/component-parts.svelte.ts

export type ComponentPartControlledKey =    | "children"    | "as"    | "value"    | "defaultValue"    | "open"    | "selected"    | "checked"    | "disabled"    | "readonly"    | "id"    | `on${string}`    | `aria-${string}`;

ButtonProps

Source: components/src/components/OverflowAction.svelte

type ButtonProps = ComponentProps<typeof Button>;

ControlledButtonKeys

Source: components/src/components/OverflowAction.svelte

type ControlledButtonKeys =        | "children"        | "as"        | "iconOnly"        | "disabled"        | "href"        | "onclick"        | "aria-label"        | "title";