ActionButton uses custom styles about react-components HOT 3 CLOSED

@mixin maas-icon-success($bg-color, $tick-color: $color-x-light) {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate%281 1%29' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='#{vf-url-friendly-color($bg-color)}' stroke-width='1.5' fill='#{vf-url-friendly-color($bg-color)}' cx='7.25' cy='7.25' r='7.25'/%3E%3Cpath fill='#{vf-url-friendly-color($tick-color)}' d='M11.05 4.173l-.066.058L6.25 8.378l-2.776-2.38-.839.948L6.25 10.75l5.5-5.787-.7-.79z'/%3E%3C/g%3E%3C/svg%3E");
}

.p-icon--success-positive {
  @include maas-icon-success($color-x-light, $color-positive);

  @extend %icon;
}

.p-icon--success-negative {
  @include maas-icon-success($color-x-light, $color-negative);

  @extend %icon;
}

.p-action-button {
  @include vf-animation(
    $property: (
      background-color,
      border,
      opacity,
    ),
    $duration: snap
  );

  &.is-loading,
  &.is-success {
    opacity: 1 !important; // Override Vanilla disabled opacity - too much colour changing otherwise
  }
}