v14.0.4


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

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

NameDescription
tabMove focus on the elements or outside
enterTrigger the component action

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024