Default button style

Hi, is it possible to modify the default blue color of the buttons in perspective. I’ve seen that when a view has lots of buttons, while the browser loads the page, the buttons color start blue and then the color is updated to the style configured. This makes the user feel like low performance.

Yes, you can edit the stylesheet.css and add something like:

[data-component='ia.input.button'].ia_button--primary:not([disabled]) {
      background-color: #ff7900;
      color: #000;
      border-radius: 1;
}



[data-component='ia.input.button'].ia_button--primary[disabled] {
    background-color: #d3d3d3;  
    color: #a9a9a9;  
    cursor: not-allowed;  
    border-radius: 1;
}


[data-component='ia.input.button'].ia_button--secondary:not([disabled]) {
      backgroundColor: "#FFFFFF";
	 borderStyle: "solid";
	 color: "#000000";	
	 borderRadius: 1;
	
	 borderColor: "#000000";

	 borderWidth: 2
}

so all primary or secondary buttons change style.

Thanks, it works! Does the stylesheet have a higher priority than the styles in the components' common properties?

1 Like

I think no, if you aply style to the component even is defined on the stylesheet it keeps the component style. You may try it.

You’re right, I have just set a different background color in the component props and the button color choose that. Then, if no style props are set, the stylesheet rules as default style source. Thanks!!