1

I have a wizard with the following custom wizard buttons:

<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button> 
<clr-wizard-button [type]="'previous'">Previous</clr-wizard-button>
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
<clr-wizard-button [type]="'custom-save'">Save</clr-wizard-button>

Now I want to style the button of type custom-save with a custom color and for this, I need to apply a css-selector. attr.class won't work.

What is the best way to achieve this?

edit: Formatted html output of the custom-save button:

<clr-wizard-button class="clr-wizard-btn-wrapper" _nghost-c5="" ng-reflect-type="custom-save" ng-reflect-disabled="false" aria-hidden="false">
  <button _ngcontent-c5="" class="btn clr-wizard-btn" type="button">
  Speichern
  </button>
</clr-wizard-button>
ChrisK
  • 99
  • 9

2 Answers2

1

Just place a custom class on your ClrWizardButton and it will be rendered for you.

<clr-wizard-button [type]="'custom'" class="my-custom-button">Cancel</clr-wizard-button>

This will render out as you see, where you can target the button using .my-custom-button button in your CSS.

<clr-wizard-button class="my-custom-button clr-wizard-btn-wrapper ng-star-inserted" _nghost-c1="" ng-reflect-type="custom-previous" aria-hidden="false">
  <button _ngcontent-c1="" class="btn clr-wizard-btn btn-outline clr-wizard-btn--secondary" type="button">Custom</button>
</clr-wizard-button>
Jeremy Wilken
  • 6,965
  • 22
  • 21
0

Assuming this renders a standard button with a type, then an attribute selector would work.

button[type="custom-save"] {
  background: lightgreen;
}
<button type="custom-save">Save</button>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161