New features: This page contains new features. See DESY-150 for details.

Split button

The split button allows users to trigger different actions via two interactive areas: a default action on the left and a menu with additional actions on the right.

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

Anatomy

Main action button
Dropdown menu icon button
Secondary action menu

Variants

Split buttons are available in two variants: secondary (default) and primary. Use the primary variant to emphasise the most important action on the page.

Example
HTML

<div class="btn-group btn-split btn-split-secondary">
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!">Action 5</a></li>
	</ul>
</div>
<div class="btn-group btn-split btn-split-primary">
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!">Action 5</a></li>
	</ul>
</div>

Add .disabled to the wrapper (.btn-group.btn-split) or to each button individually to disable the split button.

Example
HTML

<div class="btn-group btn-split btn-split-secondary disabled">
	<button type="button" class="btn btn-secondary" tabindex="-1" aria-disabled="true">Secondary</button>
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-disabled="true" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" tabindex="-1" aria-disabled="true" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Action 5</a></li>
	</ul>
</div>
<div class="btn-group btn-split btn-split-primary disabled">
	<button type="button" class="btn btn-primary" disabled aria-disabled="true">Primary</button>
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-disabled="true" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" tabindex="-1" aria-disabled="true" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!" tabindex="-1" aria-disabled="true">Action 5</a></li>
	</ul>
</div>

Sizes

There are two sizes for split buttons: medium (default) and small. Choose the size that best suits the context and available space.

Add .btn-group-sm to the wrapper and .btn-sm to each button for smaller split buttons.

Example
HTML

<div class="btn-group btn-split btn-split-secondary btn-group-sm">
	<button type="button" class="btn btn-sm btn-secondary">Secondary</button>
	<button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item"><a href="#!">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
	</ul>
</div>
<div class="btn-group btn-split btn-split-primary btn-group-sm">
	<button type="button" class="btn btn-sm btn-primary">Primary</button>
	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item"><a href="#!">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
	</ul>
</div>

The default size. No additional classes are needed.

Example
HTML

<div class="btn-group btn-split btn-split-secondary">
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!">Action 5</a></li>
	</ul>
</div>
<div class="btn-group btn-split btn-split-primary">
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!">Action 5</a></li>
	</ul>
</div>

Deprecated in v2.3

Large split buttons will be removed in v3.0. Use the default (medium) size instead.

Add .btn-group-lg to the wrapper (.btn-group.btn-split).

Example
HTML

<div class="btn-group btn-split btn-split-secondary btn-group-lg">
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!">Action 5</a></li>
	</ul>
</div>
<div class="btn-group btn-split btn-split-primary btn-group-lg">
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!">Action 5</a></li>
	</ul>
</div>

Drop-up

Add .dropup to the wrapper to open the dropdown menu above the button instead of below.

Example
HTML

<div class="btn-group btn-split btn-split-secondary dropup">
	<button type="button" class="btn btn-secondary">Split button</button>
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!">Action 5</a></li>
	</ul>
</div>

Usage

Used for this

To let users select multiple parallel actions. The split button groups a default action together with related alternative actions, reducing clutter whilst keeping them easily accessible.

Optimising user interaction

The small menu can be easily overlooked, so the split button works best when the main action is the most frequently used one. The dropdown provides quick access to less common alternatives without requiring extra screen space.

Clear default action

The most crucial requirement is that one action must be significantly more common than the others. If all actions are equally likely, consider using a standard dropdown or separate buttons instead.

Accessibility

Keyboard interaction

All buttons should be reachable via TAB and SHIFT+TAB keys. Ensure both the main action button and the dropdown toggle are independently focusable.

Example
HTML

<div class="btn-group btn-split btn-split-secondary">
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!">Action 5</a></li>
	</ul>
</div>
<div class="btn-group btn-split btn-split-primary">
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
		<li class="dropdown-item"><a href="#!">Action 1</a></li>
		<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Action 2</a></li>
		<li class="dropdown-item"><a href="#!">Action 3</a></li>
		<li class="dropdown-item active"><a href="#!" aria-selected="true">Action 4, with a looooong label</a></li>
		<li class="dropdown-item"><a href="#!">Action 5</a></li>
	</ul>
</div>

Best practices

Labels

Keep button labels brief and descriptive. Long labels reduce clarity and may cause layout issues.

Example
HTML

The label in the button needs to be brief.

Don't

Avoid using very long labels or changing the icon.

<div class="row">
    <div class="col-6">
        <div class="d-flex flex-column align-items-center justify-content-center gap-8 p-24">
            <div class="btn-group btn-split">
                <button type="button" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-primary dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle dropdown</span>
                </button>
            </div>
        </div>
        <p class="mt-8 mb-4 bold text-success"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-success"></span> Do</p>
        <p>The label in the button needs to be brief.</p>
    </div>
    <div class="col-6">
        <div class="d-flex flex-column align-items-center justify-content-center gap-8 p-24">
            <div class="btn-group btn-split">
                <button type="button" class="btn btn-primary">Click here if you want to see...</button>
                <button type="button" class="btn btn-primary dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle dropdown</span>
                </button>
            </div>
        </div>
        <p class="mt-8 mb-4 bold text-danger"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-error"></span> Don't</p>
        <p>Avoid using very long labels or changing the icon.</p>
    </div>
</div>

Grouping actions

Group related actions under the split button's dropdown menu. Actions available in the dropdown should always belong to the main action.

Example
HTML

Group related actions under the split button's dropdown menu. Actions in the dropdown should always belong to the main action.

Don't

Avoid using a split button to group actions that aren't directly related or similar.

<div class="row">
    <div class="col-6">
        <div class="d-flex flex-column align-items-center justify-content-center gap-8 p-24">
            <div class="btn-group btn-split">
                <button type="button" class="btn btn-secondary">Save</button>
                <button type="button" class="btn btn-secondary dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Save as draft</a></li>
                    <li><a href="#">Save and publish</a></li>
                </ul>
            </div>
        </div>
        <p class="mt-8 mb-4 bold text-success"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-success"></span> Do</p>
        <p>Group related actions under the split button's dropdown menu. Actions in the dropdown should always belong to the main action.</p>
    </div>
    <div class="col-6">
        <div class="d-flex flex-column align-items-center justify-content-center gap-8 p-24">
            <div class="btn-group btn-split">
                <button type="button" class="btn btn-secondary">Save</button>
                <button type="button" class="btn btn-secondary dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Print document</a></li>
                    <li><a href="#">Share via email</a></li>
                </ul>
            </div>
        </div>
        <p class="mt-8 mb-4 bold text-danger"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-error"></span> Don't</p>
        <p>Avoid using a split button to group actions that aren't directly related or similar.</p>
    </div>
</div>

Use clear and concise labels for both the main and secondary actions. Do not repeat the main button action as an item within the dropdown menu.

Example
HTML

Use clear and concise labels for both the main and secondary actions.

Don't

Do not repeat the main button action as an item within the dropdown menu.

<div class="row">
    <div class="col-6">
        <div class="d-flex flex-column align-items-center justify-content-center gap-8 p-24">
            <div class="btn-group btn-split">
                <button type="button" class="btn btn-secondary">Save</button>
                <button type="button" class="btn btn-secondary dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Save as draft</a></li>
                    <li><a href="#">Save and publish</a></li>
                </ul>
            </div>
        </div>
        <p class="mt-8 mb-4 bold text-success"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-success"></span> Do</p>
        <p>Use clear and concise labels for both the main and secondary actions.</p>
    </div>
    <div class="col-6">
        <div class="d-flex flex-column align-items-center justify-content-center gap-8 p-24">
            <div class="btn-group btn-split">
                <button type="button" class="btn btn-secondary">Save</button>
                <button type="button" class="btn btn-secondary dropdown-toggle" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Save as draft</a></li>
                    <li><a href="#">Save</a></li>
                </ul>
            </div>
        </div>
        <p class="mt-8 mb-4 bold text-danger"><span aria-hidden="true" class="spirisicon spirisicon-sm spirisicon-filled spirisicon-error"></span> Don't</p>
        <p>Do not repeat the main button action as an item within the dropdown menu.</p>
    </div>
</div>

Split button

Anatomy

Variants

Disabled

Sizes

Small

Medium (default)

Large

Drop-up

Usage

Used for this

Optimising user interaction

Clear default action

Accessibility

Keyboard interaction

Best practices

Labels

Grouping actions

Dropdown content