SelectManyButton

<style>
    .custom-button {
        display: inline-block;
        padding: 0.5rem 1rem;
        margin: 0.25rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        background: #fff;
        cursor: pointer;
        transition: all 0.2s;
    }
    .custom-button:hover {
        background: #f8f9fa;
    }
    .custom-button.ui-state-active {
        background: #007bff;
        color: #fff;
        border-color: #007bff;
    }
    .legend {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.25rem;
        vertical-align: sub;
        margin-right: 0.5rem;
    }
    .feature-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 2rem;
        margin: 0.5rem;
        border: 2px solid;
        border-radius: 0.5rem;
        background: #fff;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 200px;
        min-height: 120px;
    }
    .feature-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .feature-button.ui-state-active {
        background: #f8f9fa;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .feature-button.mobile {
        border-color: #0070ba;
    }
    .feature-button.mobile.ui-state-active {
        border-color: #0070ba;
        background: #f0f7ff;
    }
    .feature-button.tablet {
        border-color: #f7931a;
    }
    .feature-button.tablet.ui-state-active {
        border-color: #f7931a;
        background: #fff8f0;
    }
    .feature-button.desktop {
        border-color: #28a745;
    }
    .feature-button.desktop.ui-state-active {
        border-color: #28a745;
        background: #f0fff4;
    }
    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
    }
    .feature-button.mobile .feature-icon {
        color: #0070ba;
    }
    .feature-button.tablet .feature-icon {
        color: #f7931a;
    }
    .feature-button.desktop .feature-icon {
        color: #28a745;
    }
    .feature-title {
        font-weight: bold;
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
    .feature-tagline {
        font-size: 0.85rem;
        color: #6c757d;
        text-align: center;
    }
    .feature-button.ui-state-active .feature-tagline {
        color: #495057;
    }
</style>

<div class="card">
    <h:form>
        <p:growl showDetail="true" showSummary="true">
            <p:autoUpdate />
        </p:growl>

        <h5 class="mt-0">Default</h5>
        <p:selectManyButton value="#{selectManyButtonView.selectedOptions}">
            <p:ajax event="change" listener="#{selectManyButtonView.onChange}" />
            <f:selectItem itemLabel="Option 1" itemValue="Option 1"/>
            <f:selectItem itemLabel="Option 2" itemValue="Option 2"/>
            <f:selectItem itemLabel="Option 3" itemValue="Option 3"/>
        </p:selectManyButton>

        <h5>Custom Layout (Facet)</h5>
        <p:selectManyButton id="customButton" value="#{selectManyButtonView.selectedColors}">
            <p:ajax event="change" listener="#{selectManyButtonView.onChange}" />
            <f:selectItem itemLabel="Red" itemValue="Red"/>
            <f:selectItem itemLabel="Green" itemValue="Green"/>
            <f:selectItem itemLabel="Blue" itemValue="Blue"/>

            <f:facet name="custom">
                <div class="custom-button" role="checkbox" tabindex="0">
                    <span class="legend" style="background:red; display:inline-block; width:1rem; height:1rem; border-radius:0.25rem; vertical-align:middle; margin-right:0.5rem;"/> Red
                </div>
                <div class="custom-button" role="checkbox" tabindex="0">
                    <span class="legend" style="background:green; display:inline-block; width:1rem; height:1rem; border-radius:0.25rem; vertical-align:middle; margin-right:0.5rem;"/> Green
                </div>
                <p:badge icon="pi pi-bell" severity="info" iconPos="left">
                <div class="custom-button" role="checkbox" tabindex="0">
                    <span class="legend" style="background:blue; display:inline-block; width:1rem; height:1rem; border-radius:0.25rem; vertical-align:middle; margin-right:0.5rem;"/> Blue
                </div>
                </p:badge>
            </f:facet>
        </p:selectManyButton>

        <h5>Custom Layout (Referenced)</h5>
        <div id="customButton2Container">
            <p:selectManyButton id="customButton2" value="#{selectManyButtonView.selectedDevices}" layout="custom">
                <p:ajax event="change" listener="#{selectManyButtonView.onChange}" />

                <f:selectItem itemLabel="Mobile" itemValue="Mobile"/>
                <f:selectItem itemLabel="Tablet" itemValue="Tablet"/>
                <f:selectItem itemLabel="Desktop" itemValue="Desktop"/>
            </p:selectManyButton>

            <div class="flex flex-wrap justify-content-start mt-3">
                <div class="feature-button mobile" role="checkbox" tabindex="0">
                    <i class="pi pi-mobile feature-icon"></i>
                    <div class="feature-title">Mobile</div>
                    <div class="feature-tagline">Responsive mobile design</div>
                </div>
                <div class="feature-button tablet" role="checkbox" tabindex="0">
                    <i class="pi pi-tablet feature-icon"></i>
                    <div class="feature-title">Tablet</div>
                    <div class="feature-tagline">Tablet optimized view</div>
                </div>
                <div class="feature-button desktop" role="checkbox" tabindex="0">
                    <i class="pi pi-desktop feature-icon"></i>
                    <div class="feature-title">Desktop</div>
                    <div class="feature-tagline">Full desktop experience</div>
                </div>
            </div>
        </div>

        <h5>Sizes</h5>
        <p:selectManyButton id="smallButton" size="small" styleClass="mr-2">
            <f:selectItem itemLabel="Option1" itemValue="Option1"/>
            <f:selectItem itemLabel="Option2" itemValue="Option2"/>
            <f:selectItem itemLabel="Option3" itemValue="Option3"/>
        </p:selectManyButton>
        <p:selectManyButton id="normalButton" styleClass="mr-2">
            <f:selectItem itemLabel="Option1" itemValue="Option1"/>
            <f:selectItem itemLabel="Option2" itemValue="Option2"/>
            <f:selectItem itemLabel="Option3" itemValue="Option3"/>
        </p:selectManyButton>
        <p:selectManyButton id="largeButton" size="large">
            <f:selectItem itemLabel="Option1" itemValue="Option1"/>
            <f:selectItem itemLabel="Option2" itemValue="Option2"/>
            <f:selectItem itemLabel="Option3" itemValue="Option3"/>
        </p:selectManyButton>

    </h:form>
</div>