JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Buttons Smart button change hover and disabled stying?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #101332

    I am using a ‘smart-button’ and faIcons in my app toolbar..

    <smart-button class="flat header-button" (onClick)="onAddTaskClick()" [disabled]="taskEditService.noAdd$ | async">
      <fa-icon size="2x" [icon]="iconAdd"  ></fa-icon>

    By default the

    • buttons are displayed as white icons on a blue background
    • When disabled the button is covered with a white mask
    • When I hover over the button the button area changes to a white background

    I am struggling to find out how to change the disabled and hover styles
    What I would like is…

    • Disabled – icon color changed to display as grey
    • Hover – change the button border to show a thin white border

    Any suggestions?


    Think I solved it, with…

    smart-button button:hover {
      background-color: var(--smart-primary) !important;
      border: 1px white solid;
      color: white !important;
    smart-button button:disabled {
      background-color: var(--smart-primary) !important;
      color: aliceblue !important;

    Hi davout,
    Yes, the solution you shared works good in your case.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.