0

I have tried applying styles provided on prime faces demos but was unable to get the results. The code i tried is as follows

    <h:head>
        <title>Facelet Title</title>
        <style type="text/css">
            button.ui-button {
                margin-right: .5rem;
            }
        </style>
    </h:head>
    <h:body>
    <div class="card">
        <h5>Basic</h5>
        <p:commandButton type="button" value="Submit" />

        <h5>Icons</h5>
        <p:commandButton type="button" icon="pi pi-check" />

        <h5>Severities</h5>
        <p:commandButton type="button" value="Primary" />
        <p:commandButton type="button" value="Secondary" styleClass="ui-button-secondary" />

        <h5>Raised Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="ui-button-raised" />

        <h5>Rounded Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="rounded-button" />

        <h5>Flat Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="ui-button-flat" />

        <h5>Raised Text Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="ui-button-raised ui-button-flat" />

        <h5>Outlined Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="ui-button-outlined" />

        <h5>Rounded Icon Buttons</h5>
        <p:commandButton type="button" icon="pi pi-bookmark" styleClass="rounded-button ui-button-secondary" />

        <h5>Rounded Text Icon Buttons</h5>
        <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-flat" />

        <h5>Rounded and Outlined Icon Buttons</h5>
        <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-outlined" />
    </div>

But no result is shown as required.

Please guide me what stylesheet i will have to add.

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
Nasir Abbas
  • 86
  • 8

1 Answers1

1

Those button classes were introduced in PrimeFaces 10. If you are not on that version, or if you haven't upgraded your premium theme, they won't work.

So, upgrade if you don't want to add custom CSS, or add custom CSS for the classes you want to support in your project. For example, for a rounded-button you want to add this to your custom style sheet:

body .ui-button.rounded-button {
    border-radius: 2rem;
}

See also:

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
  • would u pls mind to help me how to add primefaces 10 in my maven project – Nasir Abbas May 25 '21 at 14:01
  • 1
    Please see https://primefaces.github.io/primefaces/10_0_0/#/../migrationguide/migrationguide – Jasper de Vries May 25 '21 at 14:04
  • I am even unable to add version 10 in my project. In Add Dependency dialogue, when ever i choose any give artifact like 10.0.0 [ jar.asc.sha256, jakarta ] - central, it goes to Non-Classpath Dependencies .. – Nasir Abbas May 25 '21 at 14:14
  • See https://github.com/primefaces/primefaces but simply changing the dependency will not be all. Please read the migration guide. – Jasper de Vries May 25 '21 at 14:35