Circular Spectrum button in Photoshop UXP plug in

Forum|Forum|1 year ago
April 26, 2025
2 replies
630 views

Im trying to add a circular sp button to my Photoshop plug in and I just can get this thing to work with vanilla js, css and html. At best I got an ellipse. How do I do this? I`ve downloaded ui-kitchen-sink and there are no circular buttons there but on the other hand there is these pages where it shows its possible:
https://spectrum.adobe.com/page/button/
https://opensource.adobe.com/spectrum-web-components/components/button/

Is this a React specific thing?

Here is the code im using:

<sp-button class= "testButton" variant="cta" label="Icon only">
 <div slot="icon" class="icon">
 <svg id="spectrum-icon-18-Edit" viewBox="0 0 30 30"
 ><path d="SomeLongPath" >
 </path>
 </svg>
 </div>
 </sp-button>

.testButton {
  align-self: flex-end; 
  width: 30px; 
  height: 30px;
  border-radius: 100%;
}

C

Ciccillotto

Inspiring

To create a circular button I use an svg icon, or an svg code that I insert into index.html

S_StoianovAuthor

Inspiring

Hey, thanks buddy. That's what I eventually did but I was wondering if there is a way to do it with sp-button and css.

C

Ciccillotto

Inspiring

Have you tried border-radius?

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulsante Rotondo</title>
    <style>
        .pulsante {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .pulsante:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<button class="pulsante">Click</button>

</body>
</html>

S_StoianovAuthor

Inspiring

Here is what I get from it. It seems I cant even adjust the width below a certain point:

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded