Skip to main content
‌
‌

Split button

Combine actions and secondary actions within the same element

Quick nav

Features

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

Links

View source Report an issue 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

tab

Move focus on the elements or outside

enter

Trigger the component action