Search code examples
cssvmware-clarityclarity

Clarity Wizard - Add a css-selector to a custom wizard button

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>
Solution

  • 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>