Components · Actions
Split Button
BetaSince v1.5.0
A primary action with related secondary actions behind a chevron, as one connected control.
import { SplitButton } from '@nexub/react';Examples
Default
Outlined
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| menuLabelrequired | string | — | Accessible name of the menu toggle, e.g. "More save options". |
| menurequired | ReactNode | — | DropdownMenu.Items for the secondary actions. |
| align | 'start' | 'end' | 'end' | Menu alignment against the toggle. |
| variant / size / tone | Button props | — | Applied to both halves. |
On iOS & Android: Button + ActionSheet
@nexub/react-nativeAlpha
import { Button, ActionSheet } from '@nexub/react-native';
<Button onPress={save}>Save</Button>
<IconButton icon={MoreHorizontal} label="More save options" onPress={() => setOpen(true)} />
<ActionSheet open={open} onOpenChange={setOpen} actions={[
{ label: 'Save as draft', onPress: saveDraft },
{ label: 'Save a copy', onPress: saveCopy },
]} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Pattern | Main action plus a chevron menu in one control. | No split control on phones. Show the main Button; put related actions in an ActionSheet (system sheet on iOS) or a ContextMenu on long-press. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
Button props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | — | — |
| variant | 'filled' | 'tonal' | 'outlined' | 'text' | 'glass' | — | — |
| tone | ToneValue | — | Solid semantic or product colour (overrides the variant colour). |
| size | ControlSize | 'md' | The control ladder. Primary actions on mobile use 'lg' (48). |
| loading | boolean | — | Shows a spinner, blocks presses and announces loadingLabel. |
| loadingLabel | string | — | — |
| fullWidth | boolean | — | — |
| leadingIcon | React.ComponentType<NativeIconProps> | — | — |
| trailingIcon | React.ComponentType<NativeIconProps> | — | — |