Compact Style Button using SAP UI5

[abhaymudgil]

I want to make buttons compact but I cannot do so by adding class="ui5-content-density-compact" in body tag of index.html file as my client does not have access to the index.html file. What should be the best way to do in hbs(handlebars) file? What code should I add in my hbs file so that all SAP UI5 components become compact in style and not cozy any longer?

[ilhan007]

@abhaymudgil could you add more details how are using the UI5 Web Components.

You mentioned "the handlebars file", so I assume you are developing a web component?

• Do you have a custom web component that internally renders ui5-button tags.
• Or you have ui5-button components displayed standalone in the HTML page (index.html).
• Or both cases?

Nevertheless, the only way/API is by setting the class somewhere in the DOM and every component inside the DOM gets the compact density applied.
In case you have e a custom web component that renders inside ui5-* components, you can set the class to the root DOM element in the handlebars template

<--! your Component.hbs -->
<div id="root" class="ui5-content-density-compact" >
    <ui5-button></ui5-button
     ....
</div

There is no other API as of now.