Preview
Usage #
This dual-functionality allows for surfacing variations of the default action. It conserves space in the interface and reduces cognitive load. While versatile, they should be used judiciously to avoid overwhelming users or cluttering the UI.
In addition to the Button component's documentation:
- The default button supports text or icons, while the secondary action is always an icon.
- The secondary action selected from its menu replaces the primary action.
- Ensure that primary and secondary actions are clearly labeled to avoid user confusion.
Do
- Use Split Buttons when you need to offer a default action paired with closely related actions, such as "Save" with secondary actions like "Save as Draft" or "Save all."
- Reserve for scenarios where multiple related actions can reasonably be grouped within the same context via the secondary action.
Don’t
- Avoid using if the secondary action is unrelated or distantly related.
- Refrain from grouping multiple Split Buttons together, as this can lead to a cluttered and confusing interface.
Variants #
Base #
<dt-split-button end-tooltip-text="More calling options"> Place Call <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 3 </dt-list-item> </template> </dt-split-button> <dt-split-button importance="outlined" end-tooltip-text="More calling options"> Place Call <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 3 </dt-list-item> </template> </dt-split-button> <dt-split-button importance="clear" end-tooltip-text="More calling options"> Place Call <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 3 </dt-list-item> </template> </dt-split-button>
Critical #
<dt-split-button kind="critical" end-tooltip-text="More calling options"> Place Call <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 3 </dt-list-item> </template> </dt-split-button> <dt-split-button importance="outlined" kind="critical" end-tooltip-text="More calling options"> Place Call <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 3 </dt-list-item> </template> </dt-split-button> <dt-split-button importance="clear" kind="critical" end-tooltip-text="More calling options"> Place Call <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 3 </dt-list-item> </template> </dt-split-button>
Positive #
<dt-split-button kind="positive" end-tooltip-text="More calling options"> Place Call </dt-split-button> <dt-split-button importance="outlined" kind="positive" end-tooltip-text="More calling options"> Place Call </dt-split-button> <dt-split-button importance="clear" kind="positive" end-tooltip-text="More calling options"> Place Call </dt-split-button>
Muted #
<dt-split-button importance="outlined" kind="muted" end-tooltip-text="More calling options"> Place Call </dt-split-button> <dt-split-button importance="clear" kind="muted" end-tooltip-text="More calling options"> Place Call </dt-split-button>
Disabled #
Use the disabled prop to disable both buttons, or use start-disabled and end-disabled to disable each button independently.
<dt-split-button disabled end-tooltip-text="More calling options"> Both disabled </dt-split-button> <dt-split-button start-disabled end-tooltip-text="More calling options"> Start disabled </dt-split-button> <dt-split-button end-disabled end-tooltip-text="More calling options"> End disabled </dt-split-button>
Active #
<dt-split-button start-active end-tooltip-text="More calling options"> Start active </dt-split-button> <dt-split-button end-active end-tooltip-text="More calling options"> End active </dt-split-button>
No Divider #
Use :show-divider="false" to hide the vertical divider between the start and end buttons. This is only available for the clear importance variant.
<dt-split-button importance="clear" kind="muted" :show-divider="false" end-tooltip-text="More calling options"> Place Call <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 3 </dt-list-item> </template> </dt-split-button> <dt-split-button importance="clear" :show-divider="false" end-tooltip-text="More calling options"> Place Call <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 3 </dt-list-item> </template> </dt-split-button>
Sizes #
<dt-split-button :size="100" end-tooltip-text="More calling options"> 100 </dt-split-button> <dt-split-button :size="200" end-tooltip-text="More calling options"> 200 </dt-split-button> <dt-split-button :size="300" end-tooltip-text="More calling options"> 300 </dt-split-button> <dt-split-button :size="400" end-tooltip-text="More calling options"> 400 </dt-split-button> <dt-split-button :size="500" end-tooltip-text="More calling options"> 500 </dt-split-button>
Loading #
<dt-split-button start-loading end-tooltip-text="More calling options"> Place call </dt-split-button> <dt-split-button start-loading importance="outlined" end-tooltip-text="More calling options"> Place call </dt-split-button> <dt-split-button start-loading importance="clear" end-tooltip-text="More calling options"> Place call </dt-split-button>
Navigation #
The start button supports navigation via start-href (renders as <a>) or start-to (renders as <router-link>). Navigation only applies to the start button — the end button is a dropdown trigger.
External Link #
<dt-split-button start-href="https://dialpad.com" start-target="_blank" start-rel="noopener noreferrer" end-tooltip-text="More options" > Visit Dialpad <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> </template> </dt-split-button>
Router Link #
<dt-split-button start-to="/components/button" end-tooltip-text="More options" > Go to DtButton docs <template #dropdownList> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item> <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item> </template> </dt-split-button>
Icon Support #
Icon and Label #
<dt-split-button importance="outlined" end-tooltip-text="More calling options"> <template #startIcon="{ size }"> <dt-icon name="phone" :size="size" /> </template> Place call </dt-split-button> <dt-split-button importance="outlined" start-icon-position="blockStart" end-tooltip-text="More calling options"> <template #startIcon="{ size }"> <dt-icon name="phone" :size="size" /> </template> Place call </dt-split-button> <dt-split-button importance="outlined" start-icon-position="end" end-tooltip-text="More calling options"> <template #startIcon="{ size }"> <dt-icon name="phone" :size="size" /> </template> Place call </dt-split-button> <dt-split-button importance="outlined" start-icon-position="blockEnd" end-tooltip-text="More calling options"> <template #startIcon="{ size }"> <dt-icon name="phone" :size="size" /> </template> Place call </dt-split-button>
Dual Icons on Start Button #
Use #startIcon and #startEndIcon together to place icons at both the start and end positions
within the start button. This uses the same dual-icon pattern as DtButton.
<dt-split-button importance="outlined" end-tooltip-text="More calling options"> <template #startIcon="{ size }"> <dt-icon name="phone" :size="size" /> </template> <template #startEndIcon="{ size }"> <dt-icon name="arrow-down" :size="size" /> </template> Place call </dt-split-button>
Custom End Button Icon #
Use #endIcon to replace the default chevron icon on the end (omega) button.
<dt-split-button importance="outlined" end-tooltip-text="More calling options"> <template #startIcon="{ size }"> <dt-icon name="phone" :size="size" /> </template> <template #endIcon="{ size }"> <dt-icon name="more-vertical" :size="size" /> </template> Place call </dt-split-button>
Icon Only #
<dt-split-button end-tooltip-text="More calling options" start-tooltip-text="Place call"> <template #startIcon="{ size }"> <dt-icon name="phone" :size="size" /> </template> </dt-split-button> <dt-split-button importance="outlined" kind="muted" end-tooltip-text="More calling options" start-tooltip-text="Place call"> <template #startIcon="{ size }"> <dt-icon name="phone" :size="size" /> </template> </dt-split-button> <dt-split-button importance="clear" kind="critical" end-tooltip-text="More calling options" start-tooltip-text="Place call"> <template #startIcon="{ size }"> <dt-icon name="phone" :size="size" /> </template> </dt-split-button>
Leading & Trailing #
The #leading and #trailing slots are forwarded to the alpha button. Use alpha-leading-class and alpha-trailing-class to style the containers.
<dt-split-button importance="outlined" omega-tooltip-text="More calling options" alpha-trailing-class="d-pie-100" > Place Call <template #trailing> <dt-keyboard-shortcut shortcut="{cmd}+N" /> </template> </dt-split-button> <dt-split-button importance="outlined" omega-tooltip-text="More calling options" alpha-leading-class="d-pis-100" > Place Call <template #leading> <dt-badge kind="count" text="3" /> </template> </dt-split-button>
Vue API #
import { DtSplitButton } from '@dialpad/dialtone-vue';Slots
Name
|
Type
|
|---|---|
default | Default content slot |
dropdownList | Built-in dropdown content slot, use of dt-list-item is highly recommended here. |
end | |
endIcon | End (right) button icon slot |
leading | Leading slot, forwarded to the alpha button's leading slot |
omega | |
startEndIcon | End-positioned icon within the start button (enables dual icons on the start button) |
startIcon | Start (left) button icon slot |
trailing | Trailing slot, forwarded to the alpha button's trailing slot |
alphaIcon Deprecated | Use startIcon |
omegaIcon Deprecated | Use endIcon |
Props
Name
|
Default
|
Type
|
|---|---|---|
assertiveOnFocus | false |
"true"
|
"false"
Determines whether a screenreader reads live updates of
the button content to the user while the button
is in focus. |
disabled | false |
"true"
|
"false"
HTML button disabled attribute for both buttons.
Use startDisabled or endDisabled to disable buttons individually.
(Reference)
|
dropdownPlacement | 'bottom-end' |
"top"
|
"top-start"
|
"top-end"
|
"right"
|
"right-start"
|
"right-end"
|
"left"
|
"left-start"
|
"left-end"
|
"bottom"
|
"bottom-start"
|
"bottom-end"
|
"auto"
|
"auto-start"
|
"auto-end"
The direction the dropdown displays relative to the anchor. |
endActive | false |
"true"
|
"false"
Determines whether the end button should have active styling |
endAriaLabel | null | string Descriptive label for the end button |
endDisabled | false |
"true"
|
"false"
HTML button disabled attribute for end button only
(Reference)
|
endId | string Element ID, useful in case you need to reference the button
as an external anchor for popover. | |
endTooltipText | string Text shown in tooltip when you hover the end button,
required as it is an icon only button | |
importance | 'primary' |
"clear"
|
"outlined"
|
"primary"
The fill and outline of the button associated with its visual importance. |
kind | 'default' |
"default"
|
"unstyled"
|
"muted"
|
"critical"
|
"positive"
The color of the button. |
showDivider | true |
"true"
|
"false"
Whether to show the vertical divider between the start and end buttons.
Only applies when importance is "clear". |
size | 300 |
"100"
|
"200"
|
"300"
|
"400"
|
"500"
The size of the button. |
startActive | false |
"true"
|
"false"
Determines whether the start button should have active styling |
startAriaLabel | null | string Descriptive label for the start button |
startDisabled | false |
"true"
|
"false"
HTML button disabled attribute for start button only
(Reference)
|
startHref | null | string HTML href for the start button.
When set, renders the start button as an |
startIconPosition | 'left' |
"start"
|
"end"
|
"blockStart"
|
"blockEnd"
|
"left"
|
"right"
|
"top"
|
"bottom"
The position of the icon slot within the start button. |
startLabelClass | '' | string|array|object Used to customize the start label container |
startLeadingClass | '' | string|array|object Used to customize the start button leading container |
startLoading | false |
"true"
|
"false"
Whether the start button should display a loading animation or not. |
startRel | null | string HTML rel attribute for the start button link.
Only applies when |
startReplace | false |
"true"
|
"false"
Whether to use |
startTarget | null | string HTML target attribute for the start button link.
Only applies when |
startTo | null | string|object Vue router |
startTooltipText | string Text shown in tooltip when you hover the start button,
required if no content is passed to default slot | |
startTrailingClass | '' | string|array|object Used to customize the start button trailing container |
width | null | string Button width, accepts
CSS width attribute
values |
alphaActive Deprecated | null |
"true"
|
"false"
Use startActive |
alphaAriaLabel Deprecated | string Use startAriaLabel | |
alphaDisabled Deprecated | null |
"true"
|
"false"
Use startDisabled |
alphaIconPosition Deprecated |
"start"
|
"end"
|
"blockStart"
|
"blockEnd"
|
"left"
|
"right"
|
"top"
|
"bottom"
Use startIconPosition | |
alphaLabelClass Deprecated | string|array|object Use startLabelClass | |
alphaLeadingClass Deprecated | string|array|object Use startLeadingClass | |
alphaLoading Deprecated | null |
"true"
|
"false"
Use startLoading |
alphaTooltipText Deprecated | string Use startTooltipText | |
alphaTrailingClass Deprecated | string|array|object Use startTrailingClass | |
omegaActive Deprecated | null |
"true"
|
"false"
Use endActive |
omegaAriaLabel Deprecated | string Use endAriaLabel | |
omegaDisabled Deprecated | null |
"true"
|
"false"
Use endDisabled |
omegaId Deprecated | string Use endId | |
omegaTooltipText Deprecated | string Use endTooltipText |
Events
Name
|
Type
|
|---|---|
alpha-clicked | |
end-clicked | PointerEvent | KeyboardEvent Native end button click event |
omega-clicked | |
start-clicked | PointerEvent | KeyboardEvent Native start button click event |
Accessibility #
In addition to the Button component's accessibility documentation:
- An icon-only primary action and the secondary action require a Tooltip to indicate its function.
- While the secondary action is focused, pressing
EnterorSpacetriggers its action, displaying a Dropdown component or Popover component.
Classes #
Class
|
Applies to
|
Description
|
|---|