The alignment and the order of buttons within it can be customized to suit the specific use case.
When aligned to start, the primary button is on the left side of the group.
<dt-button-group alignment="start" class="d-ba d-bas-dashed"> <dt-button importance="primary">Confirm</dt-button> <dt-button importance="outlined">Cancel</dt-button> </dt-button-group>
When aligned to end, the primary button is on the right side of the group.
<dt-button-group alignment="end" class="d-ba d-bas-dashed"> <dt-button importance="outlined">Cancel</dt-button> <dt-button importance="primary">Confirm</dt-button> </dt-button-group>
When set to space-between, the elements are evenly distributed within the row, creating a directional flow where the primary button is either on the left (regressive) or on the right (progressive).
<dt-button-group alignment="space-between" class="d-ba d-bas-dashed"> <dt-button importance="outlined">Previous</dt-button> <dt-button importance="primary">Next</dt-button> </dt-button-group>
import { DtButtonGroup } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | Default slot for button items |
Name
|
Default
|
Type
|
|---|---|---|
alignment | 'start' |
"start"
|
"end"
|
"space-between"
Alignment of the buttons inside the container |
Button Group documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope