Split Button

A composite button component that combines two buttons with a shared visual style. Perfect for primary actions with secondary options, providing a clean interface for complex button.

Import

import { SplitButton } from "@sparrowengg/twigs-react";

Usage

const SplitButtonExample = () => {
  return (
    <Box css={{ display: "flex", flexDirection: "column", gap: "$4", alignItems: "center" }}>
      <Text css={{ fontSize: "$md", fontWeight: "$6" }}>Basic Split Button</Text>
      
      <SplitButton size="md" color="primary">
        <Button leftIcon={<PencilIcon />}>Edit</Button>
        <IconButton icon={<ChevronDownIcon />} />
      </SplitButton>
    </Box>
  );
};

Examples

The split button component supports various sizes, colors, and can be combined with dropdown menus for advanced functionality.

Props

SplitButton

Prop	Type	Default
`size?`	`'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`
`color?`	`'primary' \| 'secondary' \| 'light' \| 'default' \| 'error'`	`'primary'`
`disabled?`	`boolean`	`false`
`children?`	`ReactNode`	-
`css?`	`object`	-