Split button is used to group related actions, allowing users to perform a main action or choose from a menu of secondary actions.
Alternatives
- Button — For when there is only a single action.
SplitButton
colorScheme, variant, size, disabled, loading
These props are the same as the - Button
button
Used to provide the main action.
It supports all the props a Button does except for colorScheme, variant, size, disabled, loading which are applied to the component as a whole based on the previous section and iconAfter.
menuItems
Used to provide the secondary actions in the form of a menu. It's supposed to be a ReactNode which returns a list of Dropdown.Item. You can use all the props supported by Dropdown.Item such as disabled and href.
You can also use other elements from the dropdown-v2 package such as Dropdown.GroupTitle and Dropdown.Divider.
NOTE: An error will be thrown if there are no
menuItemsprovided. Use aButtoninstead if there are no menu items to be rendered.
Usage
<SplitButton colorScheme="primary" variant="filled" button={{ label: 'Main action', onClick: () => { console.log('Main action'); }, iconBefore: Trash2Icon, }} menuItems={ <React.Fragment> <Dropdown.Item onSelect={() => { console.log('Secondary action 1'); }} > Secondary action 1 </Dropdown.Item> <Dropdown.Item onSelect={() => { console.log('Secondary action 2'); }} > Secondary action 2 </Dropdown.Item> <Dropdown.Item onSelect={() => { console.log('Disabled secondary action'); }} disabled > Disabled secondary action </Dropdown.Item> <Dropdown.Item onSelect={() => {}} startElement={<StarIcon size="small" />} > Action with an icon </Dropdown.Item> <Dropdown.Divider /> <Dropdown.GroupTitle>Some group</Dropdown.GroupTitle> <Dropdown.Item onSelect={() => { console.log('Secondary group action 1'); }} > Secondary group action 1 </Dropdown.Item> </React.Fragment> }/>All color schemes, variants and states
const actionProps: SplitButtonProps = { button: { label: 'Main', onClick: () => { console.log('Main action'); }, }, menuItems: ( <React.Fragment> <Dropdown.Item onSelect={() => { console.log('Secondary action 1'); }} > Secondary action 1 </Dropdown.Item> <Dropdown.Item onSelect={() => { console.log('Secondary action 2'); }} > Secondary action 2 </Dropdown.Item> <Dropdown.Divider /> <Dropdown.GroupTitle>Some group</Dropdown.GroupTitle> <Dropdown.Item onSelect={() => { console.log('Secondary group action 1'); }} > Secondary group action 1 </Dropdown.Item> </React.Fragment> ),};return ( <Stack gap="xxlarge" width={600}> <Columns gap="large"> <div></div> <Text size="xsmall" weight="bold" color="muted"> Default </Text> <Text size="xsmall" weight="bold" color="muted"> Loading </Text> <Text size="xsmall" weight="bold" color="muted"> Disabled </Text> </Columns> <Stack gap="small"> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Primary filled </Text> <SplitButton {...actionProps} colorScheme="primary" variant="filled" /> <SplitButton {...actionProps} colorScheme="primary" variant="filled" loading /> <SplitButton {...actionProps} colorScheme="primary" variant="filled" disabled /> </Columns> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Primary outline </Text> <SplitButton {...actionProps} colorScheme="primary" variant="outline" /> <SplitButton {...actionProps} colorScheme="primary" variant="outline" loading /> <SplitButton {...actionProps} colorScheme="primary" variant="outline" disabled /> </Columns> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Primary text </Text> <SplitButton {...actionProps} colorScheme="primary" variant="text" /> <SplitButton {...actionProps} colorScheme="primary" variant="text" loading /> <SplitButton {...actionProps} colorScheme="primary" variant="text" disabled /> </Columns> </Stack> <Divider /> <Stack gap="small"> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Secondary filled </Text> <SplitButton {...actionProps} colorScheme="secondary" variant="filled" /> <SplitButton {...actionProps} colorScheme="secondary" variant="filled" loading /> <SplitButton {...actionProps} colorScheme="secondary" variant="filled" disabled /> </Columns> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Secondary outline </Text> <SplitButton {...actionProps} colorScheme="secondary" variant="outline" /> <SplitButton {...actionProps} colorScheme="secondary" variant="outline" loading /> <SplitButton {...actionProps} colorScheme="secondary" variant="outline" disabled /> </Columns> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Secondary text </Text> <SplitButton {...actionProps} colorScheme="secondary" variant="text" /> <SplitButton {...actionProps} colorScheme="secondary" variant="text" loading /> <SplitButton {...actionProps} colorScheme="secondary" variant="text" disabled /> </Columns> </Stack> <Divider /> <Stack gap="small"> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Tertiary filled </Text> <SplitButton {...actionProps} colorScheme="tertiary" variant="filled" /> <SplitButton {...actionProps} colorScheme="tertiary" variant="filled" loading /> <SplitButton {...actionProps} colorScheme="tertiary" variant="filled" disabled /> </Columns> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Tertiary outline </Text> <SplitButton {...actionProps} colorScheme="tertiary" variant="outline" /> <SplitButton {...actionProps} colorScheme="tertiary" variant="outline" loading /> <SplitButton {...actionProps} colorScheme="tertiary" variant="outline" disabled /> </Columns> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Tertiary text </Text> <SplitButton {...actionProps} colorScheme="tertiary" variant="text" /> <SplitButton {...actionProps} colorScheme="tertiary" variant="text" loading /> <SplitButton {...actionProps} colorScheme="tertiary" variant="text" disabled /> </Columns> </Stack> <Divider /> <Stack gap="small"> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Critical filled </Text> <SplitButton {...actionProps} colorScheme="critical" variant="filled" /> <SplitButton {...actionProps} colorScheme="critical" variant="filled" loading /> <SplitButton {...actionProps} colorScheme="critical" variant="filled" disabled /> </Columns> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Critical outline </Text> <SplitButton {...actionProps} colorScheme="critical" variant="outline" /> <SplitButton {...actionProps} colorScheme="critical" variant="outline" loading /> <SplitButton {...actionProps} colorScheme="critical" variant="outline" disabled /> </Columns> <Columns gap="large" alignY="center"> <Text size="xsmall" weight="bold" color="muted"> Critical text </Text> <SplitButton {...actionProps} colorScheme="critical" variant="text" /> <SplitButton {...actionProps} colorScheme="critical" variant="text" loading /> <SplitButton {...actionProps} colorScheme="critical" variant="text" disabled /> </Columns> </Stack> </Stack>);