Umbraco UI Library Button hover effect missing

Questions
, , ,
1

I have this button:

<uui-button id="resetButton" type="button" look="primary" color="danger" label="Reset"></uui-button>

That I copied from storybook - Storybook.

Everything works fine, but when I hover over it, there is no effect; the visuals do not change.

I have custom styling, but nothing related to the hover effect, or even to the button.

Any idea why this could happen?

Animation

3

What version of the uui library are you using?

4

Make sure you have the uui-css package installed and imported the CSS from there. Then append the .uui-text class to the body element.

import '@umbraco-ui/uui-css/dist/uui-css.css'
import '@umbraco-ui/uui-button';

<body class="uui-text uui-font">
  <uui-button id="resetButton" type="button" look="primary" color="danger" label="Reset"></uui-button>
</body>

Read more here:

5

Thanks, I installed the npm package and imported the CSS and the button, but now I’m getting this error:

Uncaught (in promise) TypeError: The specifier “@umbraco-ui/uui-css/dist/uui-css.css” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

I forgot to mention that I’m adding this button from a ts file’s UmbLitElement with render()

6

Oh, if you are already in the Backoffice, then you don’t need to add anything extra. I’m wondering if the hover effect may be cancelled out due to the dark-mode theme. The same color is likely set for both normal and hover backgrounds in that theme.

7

Ah yes, it was the dark theme! It says it’s experimental (the dark theme), so yeah, I should’ve expected this.

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.