/

Buttons Groups


Default

HomeProfileSettings
UIMButtonGroup(["aria-label":"Default button group"], 
      UIMButton(["btn-secondary"], "Home"), 
      UIMButton(["btn-secondary"], "Profile"),
      UIMButton(["btn-secondary"], "Settings"))

States

HomeProfileSettings
UIMButtonGroup(["aria-label":"Default button group"], 
      UIMButton(["btn-secondary", "active"], "Home"), 
      UIMButton(["btn-secondary"], "Profile"),
      UIMButton(["btn-secondary"], "Settings"))

Outlined

HomeProfileSettings
UIMButtonGroup(["aria-label":"Default button group"], 
      UIMButton(["btn-outline-secondary"], "Home"), 
      UIMButton(["btn-outline-secondary"], "Profile"),
      UIMButton(["btn-outline-secondary"], "Settings"))

Links

Toolbar

123456789
UIMButtonToolbar(["aria-label":"Toolbar button group"], 
      UIMButtonGroup(["aria-label":"First group"], 
        UIMButton(["btn-secondary"], "1"), 
        UIMButton(["btn-secondary"], "2"),
        UIMButton(["btn-secondary"], "3")),
      UIMButtonGroup(["aria-label":"Second group"], 
        UIMButton(["btn-secondary"], "4"), 
        UIMButton(["btn-secondary"], "5"),
        UIMButton(["btn-secondary"], "6")),
      UIMButtonGroup(["aria-label":"Third group"], 
        UIMButton(["btn-secondary"], "7"), 
        UIMButton(["btn-secondary"], "8"),
        UIMButton(["btn-secondary"], "9")))

Sizing

HomeProfileSettingsHomeProfileSettingsHomeProfileSettings
UIMButtonGroup(["btn-group-sm"], ["aria-label":"Small button group"], 
      UIMButton(["btn-secondary"], "Home"), 
      UIMButton(["btn-secondary"], "Profile"),
      UIMButton(["btn-secondary"], "Settings")),
    UIMButtonGroup(["aria-label":"Default button group"], 
      UIMButton(["btn-secondary"], "Home"), 
      UIMButton(["btn-secondary"], "Profile"),
      UIMButton(["btn-secondary"], "Settings")),
    UIMButtonGroup(["btn-group-lg"], ["aria-label":"Large button group"], 
      UIMButton(["btn-secondary"], "Home"), 
      UIMButton(["btn-secondary"], "Profile"),
      UIMButton(["btn-secondary"], "Settings"))

Nesting

HomeProfile
UIMButtonGroup(["aria-label":"Button group with nested dropdown"], 
      UIMButton(["btn-secondary"], "Home"), 
      UIMButton(["btn-secondary"], "Profile"),
      UIMButtonGroup( 
        UIMButton("btnGroupNesting", ["btn-secondary", "dropdown-toggle"], ["data-bs-toggle":"dropdown", "aria-expanded":"false"], "Settings"),
        H5Div(["dropdown-menu"], ["aria-labelledby":"btnGroupNesting"], 
          H5A(["dropdown-item"], ["href":"#"], "Dropdown link"),
          H5A(["dropdown-item"], ["href":"#"], "Dropdown link"))))

Vertical

HomeProfileSettings
H5Div(["btn-group-vertical"], ["role":"group", "aria-label":"Vertical button group"],
      UIMButton(["btn-secondary"], "Home"), 
      UIMButton(["btn-secondary"], "Profile"),
      UIMButton(["btn-secondary"], "Settings"))