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-groupalignment = " start" class = " d-ba d-bas-dashed" > < dt-buttonimportance = " primary" > </ dt-button> < dt-buttonimportance = " outlined" > </ dt-button> </ dt-button-group>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
When aligned to end, the primary button is on the right side of the group.
< dt-button-groupalignment = " end" class = " d-ba d-bas-dashed" > < dt-buttonimportance = " outlined" > </ dt-button> < dt-buttonimportance = " primary" > </ dt-button> </ dt-button-group>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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-groupalignment = " space-between" class = " d-ba d-bas-dashed" > < dt-buttonimportance = " outlined" > </ dt-button> < dt-buttonimportance = " primary" > </ dt-button> </ dt-button-group>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
import { DtButtonGroup } from '@dialpad/dialtone-vue' ;