Fluxo UIFluxo UIv0.4.1

Split Button

A primary action button paired with a secondary trigger that opens a menu of related actions.

Basic Usage

Default Split Button

Primary action with related actions in a menu.

Last action: —
import { SplitButton } from 'fluxo-ui';

<SplitButton
  label="Save"
  onClick={() => console.log('Save')}
  items={[
    { label: 'Save as draft', icon: EditIcon, onClick: () => {} },
    { label: 'Save and publish', icon: ShareIcon, onClick: () => {} },
    { divider: true },
    { label: 'Discard changes', icon: TrashIcon, danger: true, onClick: () => {} },
  ]}
/>

Variants

Variants

All seven Button variants flow through both halves.

<SplitButton variant="default" label="Default" items={items} />
<SplitButton variant="primary" label="Primary" items={items} />
<SplitButton variant="success" label="Success" items={items} />
<SplitButton variant="warning" label="Warning" items={items} />
<SplitButton variant="danger" label="Danger" items={items} />
<SplitButton variant="info" label="Info" items={items} />
<SplitButton variant="secondary" label="Secondary" items={items} />

Layouts

Layouts

Default, outlined, rounded, sharp, and plain shapes.

<SplitButton layout="default" label="Default" variant="primary" items={items} />
<SplitButton layout="outlined" label="Outlined" variant="primary" items={items} />
<SplitButton layout="rounded" label="Rounded" variant="primary" items={items} />
<SplitButton layout="sharp" label="Sharp" variant="primary" items={items} />
<SplitButton layout="plain" label="Plain" variant="primary" items={items} />

Sizes

Sizes

Five preset sizes from xs through xl.

<SplitButton size="xs" label="XS" items={items} />
<SplitButton size="sm" label="SM" items={items} />
<SplitButton size="md" label="MD" items={items} />
<SplitButton size="lg" label="LG" items={items} />
<SplitButton size="xl" label="XL" items={items} />

Import

import { SplitButton } from 'fluxo-ui';
import type { SplitButtonProps, SplitButtonItem } from 'fluxo-ui';

Props

labelreq
string

Primary action text

onClick
(e: MouseEvent) => void | Promise<unknown>

Primary action handler (supports async loading state)

itemsreq
Array<SplitButtonItem>

Menu items: { label, icon?, onClick?, disabled?, danger?, divider?, shortcut? }

variant
'success' | 'warning' | 'danger' | 'info' | 'default' | 'primary' | 'secondary'"'primary'"

Color variant applied to both halves

layout
'default' | 'outlined' | 'plain' | 'rounded' | 'sharp'"'default'"

Shared button layout

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'"'md'"

Shared button size

leftIcon
IconComponent | ReactElement

Icon on the left side of the primary button

rightIcon
IconComponent | ReactElement

Icon on the right side of the primary button

loading
boolean"false"

Show loading spinner on the primary button

disabled
boolean"false"

Disable both halves

menuPlacement
'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'auto'"'bottom-end'"

Preferred menu placement (auto-flips when out of viewport)

menuWidth
'trigger' | 'auto' | number"'auto'"

Menu width: 'trigger' matches the SplitButton, 'auto' fits content, or a px number

triggerIcon
IconComponent | ReactElement

Icon used on the secondary trigger (default chevron-down)

ariaLabel
string

Accessible label for the trigger (default: 'More {label} actions')

id
string

HTML id attribute

className
string

Additional CSS classes

Features

Primary + Menu

A primary action paired with a chevron trigger that opens secondary actions.

Full Keyboard

Arrow keys, Home/End, type-ahead, Enter/Space activate, Escape closes & restores focus.

Auto-flip Menu

The portal menu auto-flips vertically/horizontally when there is not enough viewport space.

Reuses Button

Both halves use the existing Button so variants, layouts, sizes, and async loading flow through.