-
|
I'm developing an app that has a standard phone-style fixed footer that has sl-icon-buttons in it as a kind of navbar. I'd like to badge one of these icons in certain cases when there are outstanding items (messages). The docs talk about having badges associated with sl-buttons, but not sl-icon-buttons, and when I add an sl-badge within an sl-icon-button, it just doesn't show up at all. Is that not a standard UI function, to have badges to highlight the icons in a toolbar...? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
For convenience, buttons do have built-in styles for badges, and we're exploring whether this makes sense for other component combinations. As for icon button, it doesn't render a I hope that helps! |
Beta Was this translation helpful? Give feedback.
-
|
I ended up putting a "position:relative;" div that wraps tightly around the sl-icon-button, just styling the badge to be top-right myself, it works no problem. |
Beta Was this translation helpful? Give feedback.
For convenience, buttons do have built-in styles for badges, and we're exploring whether this makes sense for other component combinations.
As for icon button, it doesn't render a
<slot>like regular buttons, so nothing you slot in will show up. One suggestion is to use regular buttons with custom styles to adjust the size/shape. Another is to add the badge and the button inside another container and style them accordingly.I hope that helps!