Quaff

QSplitBtn

Split buttons pair a primary action with a menu of alternatives. Keep the common action accessible while offering related choices in one control.

Ready to send

info QSplitBtn API Source
interface QSplitBtnProps extends Omit<HTMLButtonAttributes, "children" | "disabled" | "color">
disabled
?: boolean = false
Puts the component into a disabled state, which prevents user interaction.
expanded
?: boolean = $bindable(false)
Whether the menu is open. This property is bindable.
href
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to.
icon
?: QBtnIcon = undefined
Icon to display on the leading edge of the button.
label
?: string = undefined
Text for the primary action. Menu content is supplied through children.
loading
?: boolean = false
Puts the button in a loading state, adding a loader as the leading icon.
menuLabel
: string = undefined
Accessible name for the menu button, such as "More send options".
noRipple
?: boolean = false
Disables the ripple effect on click.
replace
?: boolean = false
Replaces the current entry in the browser's history rather than adding a new one. This is the same as setting the `data-sveltekit-replacestate` attribute to "true".
rippleColor
?: string = undefined
Sets the ripple effect's color for the component. If omitted, the ripple will inherit the component's text color.
size
?: QBtnProps["size"] = "sm"
Expressive size, from xs to xl. Defaults to sm (40px minimum height).
target
?: HTMLAnchorAttributes["target"] = undefined
For navigational components only, sets or retrieves the window or frame at which to target content.
to
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to. As it is the same as href, it is recommended to use href instead.
variant
?: Exclude<QBtnVariantOptions, "flat"> = "filled"
Button style. Defaults to filled.

Usage

Primary Action and Menu

The leading button performs your primary onclick action. The trailing button opens the built-in menu containing the children snippet. Give menuLabel a contextual name, such as “More save options”.

QSplitBtn always uses Material 3 Expressive styling, independently of the global expressive setting. It defaults to the filled variant and sm size. Bind expanded when you need to read or control the menu's open state.

Ready to save

Menu: closed

Variants
Choose filled, tonal, elevated, or outlined. Both halves share the variant. Opening the menu changes the trailing button's shape and rotates its icon while preserving its color.

Choose an action

Sizes
Five expressive sizes set both buttons' minimum height: xs (32px), sm (40px), md (56px), lg (96px), and xl (136px). Small sizes retain a larger interaction target. Large examples can be scrolled horizontally.

XS · 32px

SM · 40px

MD · 56px

LG · 96px

XL · 136px

Choose an action

Disabled, Loading, and Icon-only

disabled disables both actions. loading displays a progress indicator in the leading button. An icon-only primary action needs its own aria-label, separately from the trailing button's menuLabel.

Choose a download action

Attributes and Keyboard

Native attributes and event handlers, including type, name, value, and aria-label, apply to the primary button. Link props such as href also apply to the primary action. class, style, and dir apply to the outer split-button container.

Tab moves between the two buttons; Space or Enter activates the focused button. The menu trigger announces its expanded state. Use QList with role="presentation" and clickable QItem elements with role="menuitem" for menu actions and arrow-key navigation. Selecting an action closes the menu, and Escape dismisses it.

See the Material 3 split-button specifications, usage guidelines, and accessibility guidance.

Privacy Policy