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

Photoshop
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