# SplitButton

Source: https://lumeo.nativ.sh/components/split-button

# SplitButton

A button split into a main action half and a chevron half that opens a dropdown menu of secondary actions.

## When to Use

-   There is one dominant primary action and several less common alternatives (e.g. Save vs. Save and Publish).
-   Reduce button count in toolbars while still exposing all relevant actions.
-   Replace a plain button + separate dropdown when both should share the same visual weight.

Preview Code

Basic

Save

Copy Code

Preview Code

Variants

Default

Secondary

Outline

Destructive

Copy Code

Preview Code

Sizes

Small

Default

Large

Copy Code

Preview Code

Disabled

Disabled

Copy Code

## API Reference

### SplitButton

Property

Type

Default

Description

Text

string?

null

Primary button label text. Ignored when ChildContent is provided.

ChildContent

RenderFragment?

null

Custom primary button label content. Takes precedence over Text.

OnClick

EventCallback<MouseEventArgs>

—

Callback invoked when the primary (left) half of the button is clicked.

MenuContent

RenderFragment?

null

The dropdown menu items rendered when the chevron half is clicked. Place DropdownMenuItem elements here.

Variant

Button.ButtonVariant

Default

Visual style applied to both halves. Values: Default, Secondary, Destructive, Outline, Ghost, Link.

Size

Button.ButtonSize

Default

Size applied to both halves. Values: Sm, Default, Lg.

Disabled

bool

false

Disables both halves of the button.

Class

string?

null

Additional CSS classes applied to the wrapper element.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes forwarded to the wrapper element.

## Related Components

-   [Button](/components/button) — A standard single-action trigger.
-   [DropdownButton](/components/dropdown-button) — A button that opens a dropdown menu without a separate primary action.
-   [ButtonGroup](/components/button-group) — Groups multiple related buttons into a segmented bar.