#SplitButton

Pairs one action with a menu of related ones, for when a second action matters enough that burying it in a DropdownMenu would hide it. Both halves are ordinary Buttons, so they must share a variant, colour and size — the group only joins their facing corners.

Source · Storybook

#Usage

import { Button } from '@wallarm-org/design-system/Button';
import { ChevronDown } from '@wallarm-org/design-system/icons';
import { SplitButton } from '@wallarm-org/design-system/SplitButton';

#Examples

#Variants

Every sanctioned pairing, and the reason the pair must match: outline buttons drop the gap and overlap their borders into a single hairline, which only looks right when both halves carry the same variant.

#Sizes

Both halves take the same size, since the group aligns them rather than sizing them.

#Content

Text, icon-and-text, and icon-only leading halves. The trailing half stays a bare chevron — giving it a label doubles the width and makes the menu look like a second action.

#With dropdown menu

The real shape: the leading half performs the default action, and only the chevron opens the menu. Repeat the default inside the menu only if its wording differs there.

#Props