<sp-action-button> border is out of place and can't override color

Photoshop
1

Title says it all - button border is misplaced. It’s shifted on all buttons, but slightly different for different buttons (see the screenshot)

image
image582×167 2.43 KB

Also there’s no way I could figure out how to override border color (no issues with background)
Any advice on these two issues?

Ps 23, API v2, Manifest v5, Win10

2

It’s a rounding issue that affects all layout; you can’t do anything about it until it’s fixed in UXP core. You’ll see similar issues in first-party features as well.

Border colors are not configurable. You can use pseudo elements along w/ absolute & relative positioning to overwrite them:

.yourButton {
    position: relative;
}

.yourButton:after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 1px solid red;
    border-radius: 4px;
}

You may elect to add quiet attribute to sp-action-button if you want to remove the border entirely so that it doesn’t conflict with what you add using :after, especially if you’re using a border radius other than 4.

2 Likes
3

As usual - clear answer with a solution
Thank you so much