Hello, I am trying to style buttons, and I want to have a different style for outlined buttons compared to normal buttons. There are some examples in the docs, but nothing for how to differentiate between specific types of buttons. How do I do this?
Hello Jonas,
Thank you for posting in our community!
I have been looking into your question and what I can suggest is defining custom themes for each button as required and then passing them into your application via custom CSS classes as demonstrated in our Angular Button Styling section here.
For example:
<div class="custom-flat"> <button igxButton="flat" igxRipple>Flat</button> </div>
@use "igniteui-angular/theming" as *; $custom-flat-theme: button-theme( … ); :host::ng-deep { .custom-flat { @include css-vars($custom-flat-theme); } }
Here can be found a small sample demonstrating my suggestion. Please test it on your side and let me know if you need any further information on the matter.
Looking forward to your reply.
Sincerely,Riva IvanovaSoftware Developer
Hello Riva,
Thank you for the answer, but what I'm mainly hoping for is to have a styling for all the outlined buttons, without the need to wrap them in a "custom-outlined" class. Is this possible?
Thank you for following up!
The above-suggested approach is the recommended way to style multiple buttons with different themes. However, an alternative approach I can suggest is targeting the default igx-button--outlined CSS class and defining the custom styling similar to the following:
<button igxButton="outlined" igxRipple>Outlined</button>
:host::ng-deep { .igx-button--outlined { --foreground: #1565c0; --icon-color: #0d47a1; --hover-background: #bbdefb; --hover-foreground: #1565c0; --focus-background: #bbdefb; --focus-foreground: #1565c0; --border-radius: 4px; --border-color: #1565c0; … } }
Please note that this is and alternative approach in order to achieve your requirements. Using the default CSS classes is not recommended since they are used internally and can be changed at any time.
Here can be found a modified sample demonstrating my suggestion. Please test it on your side and let me know if you need any further information on the matter.
Sincerely, Riva Ivanova Software Developer