[CSS] Is there a way to stack button group items vertically?
Application Type

Hi guys,

I am looking for a solution to stack the buttons in button group vertically like


Currently, it looks like this.

I tried to use

display: block

on .button-item but it doesn't work.

.button-group {
    background-color: transparent;
    border-radius: 0;
    padding: var(--space-none);

.button-group-item {
    background-color: #fff;
    border: var(--border-size-s) solid rgba(200, 200, 200, 0.4);
    border-radius: 0;
    color: black;
    cursor: pointer;
    font-size: var(--font-size-s);
    font-weight: var(--font-semi-bold);
    height: 40px;
    padding: var(--space-none) var(--space-base);

.button-item, .button-group-item.button-item {
    display: block;
    height: auto;
    padding: 16px;


Hello Shu,

There is a <div> that wrap all the buttons.

You can extented the Outsystems UI, using this on your CSS

[data-button-group] > div {

    flex-direction: column;


Hope that helps you.

Best Regards,

Nuno R


Try this.

Overwrite this class -

[data-button-group] > div {

  1.     display: -webkit-box;
  2.     display: -webkit-flex;
  3.     display: -ms-flexbox;
  4.     display: flex;
  5.     flex-wrap: wrap;
  6.     flex-direction: column;




Mostly the same thing that I said :)

Yeah,  I was trying out with little demo, so thought to post to make it more clear & realized the solution was already posted. but certainly the same solution as described by you :) 

Keep sharing and helping. Cheers.



Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.