Demo - Bootstrap 5

Levels

Areas

Sections

20.12.2020 / 22.02.2021

Button Groups

Default

BS5ButtonGroup(["aria-label":"Default button group"], 
      BS5Button(["btn-secondary"], "Home"), 
      BS5Button(["btn-secondary"], "Profile"),
      BS5Button(["btn-secondary"], "Settings"))

States

BS5ButtonGroup(["aria-label":"Default button group"], 
      BS5Button(["btn-secondary", "active"], "Home"), 
      BS5Button(["btn-secondary"], "Profile"),
      BS5Button(["btn-secondary"], "Settings"))

Outlined

BS5ButtonGroup(["aria-label":"Default button group"], 
      BS5Button(["btn-outline-secondary"], "Home"), 
      BS5Button(["btn-outline-secondary"], "Profile"),
      BS5Button(["btn-outline-secondary"], "Settings"))

Links

Home Profile Settings

BS5ButtonGroup(["aria-label":"Default button group"], 
      BS5ButtonLink(["btn-secondary"], ["href":"#"], "Home"), 
      BS5ButtonLink(["btn-secondary"], ["href":"#"], "Profile"),
      BS5ButtonLink(["btn-secondary"], ["href":"#"], "Settings"))

Toolbar

BS5ButtonToolbar(["aria-label":"Toolbar button group"], 
      BS5ButtonGroup(["aria-label":"First group"], 
        BS5Button(["btn-secondary"], "1"), 
        BS5Button(["btn-secondary"], "2"),
        BS5Button(["btn-secondary"], "3")),
      BS5ButtonGroup(["aria-label":"Second group"], 
        BS5Button(["btn-secondary"], "4"), 
        BS5Button(["btn-secondary"], "5"),
        BS5Button(["btn-secondary"], "6")),
      BS5ButtonGroup(["aria-label":"Third group"], 
        BS5Button(["btn-secondary"], "7"), 
        BS5Button(["btn-secondary"], "8"),
        BS5Button(["btn-secondary"], "9")))

Sizing

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

Nesting

BS5ButtonGroup(["aria-label":"Button group with nested dropdown"], 
      BS5Button(["btn-secondary"], "Home"), 
      BS5Button(["btn-secondary"], "Profile"),
      BS5ButtonGroup( 
        BS5Button("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

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