How to make button group vertical
Application Type
Service Studio Version
11.8.13 (Build 32892)

I am trying to make my button group have a vertical layout for it's button items, but I can't change the layout from horizontal. Below is an example of what I'm trying to do. 

Hi Lynn, 

Try this in CSS:

[data-button-group] > div {

display: grid;


.button-group-item:first-child {

border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);


.button-group-item:last-child {

border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);


Best regards,


Rank: #171

Hey Lynn,

I was also able to make it using only CSS, I used a different CSS than Eduardo, but I believe both of them will work.

The CSS I used is:

/*set display flex and column so all itens will break*/

.button-group > div


     display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column; 

} /*Remove radius from first item*/

.button-group-item:first-child {

    border-radius: unset;

/*Remove radius from last item*/

.button-group-item:last-child {

    border-radius: unset;

/*Add border left for all itens, you need to override it or it will not have border left, also add remove border top so it don't seems like duplicated*/

.button-group-item:not(:first-child) {

    border-left: var(--border-size-s) solid var(--color-primary);

    border-top: var(--border-size-none);


I also made a Sample if you need it.

My result was this:

If you want first and last items to have a top and bottom radius, you can use the class that Eduardo provided.

Hope it helps,

Cheers and Regards,

RR :)


I also tested what Raphael did and it worked. What I did suggested looked like this:

Where did you change the CSS, on screen or in a Block?