Custom Widgets?

Let’s say that I want to create a unique type of interactable. For example, a circle cut into sections, where when you click on each section something unique happens. I can’t use any of the pre-defined spectrum widgets such as sp-button for this because the unique shape and color of the button is essential to the UX.

The circle is just a simple example.

How would I define and insert something like that?

in theory you can use normal divs with your own styles. however you’ll find that not all css properties are supported so it’s a matter of trial and error.

you may find some success with svg elements but you’ll need to try.

also using “custom” elements is discouraged since the docs say that all elements other than spectrum uxp will not be supported in the future.