Theme
Floating Action Button

Custom content allows you to open an overlay panel instead of a menu.

1
    If you provide your email address above, then by submitting
    this form you agree that we may contact you by email
    to follow up on your feedback.
    Source
    
    <p:badge value="1" severity="danger">
            <pe:fab id="btnFab" icon="pi pi-question-circle" iconActive="pi pi-times" style="background: green;" widgetVar="fabWidget">
                <pe:javascript event="open" execute="PF('overlayWidget').show('btnFab');"/>
                <pe:javascript event="close" execute="PF('overlayWidget').hide();"/>
            </pe:fab>
        </p:badge>
    
        <p:overlayPanel id="overlayPanel" widgetVar="overlayWidget" appendTo="@(body)" showEffect="drop" hideEffect="slide">
            <p:panelGrid styleClass="ui-noborder">
                <p:row>
                    <p:column styleClass="ui-widget-header">
                        <p:outputLabel for="txtMessage" value="Message"/>
                    </p:column>
                </p:row>
                <p:row>
                    <p:column>
                        <p:inputTextarea id="txtMessage" rows="5" cols="43" autoResize="false"/>
                        <p:watermark for="txtMessage" value="Send us a message if you have something to say."/>
                    </p:column>
                </p:row>
                <p:row>
                    <p:column styleClass="ui-widget-header">
                        <p:outputLabel for="txtEmail" value="Email address (optional)"/>
                    </p:column>
                </p:row>
                <p:row>
                    <p:column>
                        <p:inputText id="txtEmail" size="40"/>
                        <p:watermark for="txtEmail" value="Email address (optional)"/>
                    </p:column>
                </p:row>
                <p:row>
                    <p:column style="font-style: italic;">
                        If you provide your email address above, then by submitting<br/>
                        this form you agree that we may contact you by email<br/>
                        to follow up on your feedback.<br/>
                    </p:column>
                </p:row>
                <p:row>
                    <p:column>
                        <p:outputPanel style="text-align:right;">
                            <p:commandButton value="Send" type="button" onclick="PF('fabWidget').close();"/>
                        </p:outputPanel>
                    </p:column>
                </p:row>
                <p:row>
                    <p:column>
                        <p:spacer height="50"/>
    
                    </p:column>
                </p:row>
            </p:panelGrid>
        </p:overlayPanel>
                
    Components and more
    Documentation pe:fab
    Attributes (move mouse over the names to see data types)
    Name Description
    id Unique identifier of the component in a namingContainer.
    rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
    binding An el expression referring to a server side UIComponent instance in a backing bean.
    model MenuModel instance to create menus programmatically.
    tabindex Position of the items in the tabbing order. Default is 0.
    icon Icon for the main button. Default value is "pi pi-plus".
    iconActive Active variant of the icon for the main button. Default value is null.
    keepOpen Keep the menu open when an item is clicked. Default value is false.
    widgetVar Name of the client side widget.
    styleClass Style class of the main container element. Default value is null.
    style Style of the main button element. Default value is null.
    PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.0,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2021-12-10 14:32
    occured!