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