How to? Input prefix and notification badge

Ask us anything How do I?
1

Hi there,

Inspired by the academy I am trying to create an UI based upon another free Figma design.

Now I wonder if it is possible to:

  • add a prefix (or suffix) or add an icon into input field? For example a search icon in a search input field.
  • add notification badges to icons. For example a red dot with or without a number positioned top right of the icon?

Thanks!

2

Hi there,

I solved the notification badge (without number) using a tooltip styled as a red dot. Is this the way to go or is there an alternative approach?

image

Stil thinking about how to add a prefix and/or suffix to an input field.

1 Like
3

can you tell me how you did it

4

For both, you need to wrap the field and the icon, or the bell, and the text with padding and border radius in divs, and set to the overlapping elements, position absolute.

1 Like
5

Hello everyone,

I’m also trying to implement notifications to my web app dashboard, but I’m still figuring out how am I going to build this.
Could you please share your thoughts on how to build it? Should I create a table to keep all notifications that are being sent? How to trigger notifications to specific users? How to manage notifications that have already been read by the user?

Thank you.