The design of Cosmos components can be customized to allow projects and brands to create unique experiences for their users on top of trusted and ready-to-use standards. Read more about the concept behind Code.

CSS Custom Properties are a reliable and easy way to customize the look of a component at a high level. Custom Properties are limited by design, they only allow selected styles of a component to be changed.

We recommend targeting your custom element with specific selectors, such as a class.

Using a custom icon instead of one from the Cosmos library, you can follow our guidelines to create a custom icon and utilize it with our Icon component. Then you can use your custom icon inside the button as you use the icons from our library.

While Custom Properties offer an easy and fast way to customize a component's style, they are limited by design. For more flexibility and advanced styling, components offer a low-level way to customize them via CSS Shadow Parts.