actions

Split button

Combine actions and secondary actions within the same element.

Features

Keyboard accessible
Focusable even when disabled
Multiple styles and sizes
Custom popover and icon
Themes ready

Links

Open in playground Open in Storybook View source ARIA design ARIA authoring

Anatomy

import { SplitButton } from "@wonderflow/react-components";

export default () => {
  return (
    <SplitButton label="Button">
      <Menu>
        <Menu.Item>Option 1</Menu.Item>
        <Menu.Item>Option 2</Menu.Item>
      </Menu>
    </SplitButton>
  );
};

tsx

API Reference

PROPERTY

TYPE

DEFAULT

kind

enum

primary

dimension

enum

regular

fullWidth

boolean

false

icon

enum

disabled

boolean

busy

boolean

onClick

function

placement

enum

auto-start

offset

number

8

as

enum

button

Accessibility

Keyboard interactions

Name	Description
`tab`	Move focus on the elements or outside
`enter`	Trigger the component action