C3 AI Documentation Home

Enable default button styles

Starting in version 8.9, default CSS styling for raw HTML <button> tags was removed to prevent unintended "CSS pollution" in custom React components. If you want to retain the C3 component library’s button styling, you can opt in explicitly.

Why was this change made?

Previously, basic styles were automatically applied to all <button> elements, even in custom React code. With the shift to more pure React usage, implicit styling is no longer desirable. Now, developers can choose whether to use the default button styles.

How to enable default button styles at the application level

If you want to enable the default button style for all buttons in your application without modifying your code, you can set the configuration at the application level.

To include this configuration in your application, add the file {package}/config/UiSdlConfig/UiSdlConfig.json with the following content:

Text
{
  "style": {"useDefaultButtonStyle": true}
}

If you already have an existing configuration, include this field in your existing configuration.

This configuration allows you to control button styling globally, ensuring consistent appearance across your application.

Was this page helpful?