Oat Button Group Demo

Button groups are created using OatButtonGroup component, which renders a <menu class="buttons"> whose connected-button styling requires each button to be wrapped in an <li>.

Default Button Group

How to use

Use OatButtonGroup.of with a model of items; it is a ListView, since Oat only styles buttons that sit inside <li> children of the <menu>.

// Java - A button group filled from a lambda, without a subclass
OatButtonGroup<String> group = OatButtonGroup.of("group", Model.ofList(labels), (item, label) -> {
    Link<Void> button = new Link<>("button") { public void onClick() {} };
    button.add(new Label("label", Model.of(label)));
    button.add(Oat.Behaviors.button().setStyle(Style.OUTLINE));
    item.add(button);
});
add(group);

<!-- HTML -->
<menu wicket:id="group">
    <li wicket:id="items">
        <button wicket:id="button"><span wicket:id="label"></span></button>
    </li>
</menu>