Novu•4w ago

How do I style the notification counter in web component?

43 Replies

Pawan Jain•4w ago

@rahul Can you please share screenshot what you want to style?

rahul•4w ago

Notification counter circle is covering the bell

rahul•4w ago

@Pawan Jain How to reduce its size And also can we change the bell icon in web component? If yes, how to do it? @Emil ?

Novu_Bot•4w ago

@rahul, you just advanced to level 1!

empe•4w ago

@rahul What notification center are you using? Is it the new <Inbox /> or the old notification center?

rahul•4w ago

old one bellButton: { root: { dot: { width: '12px !important', height: '12px !important' }, svg: { width: '20px !important', height: '20px !important' } } } I have tried this but didn't work @Emil

empe•4w ago

What do you want to change? The icon it self? Or just the way it looks?

rahul•4w ago

Currently I want to change the red dot size I want to make it smaller

empe•4w ago

const styles = {
  unseenBadge: {
    root: {
      color: 'white',
      background: 'red',
      borderRadius: '50%',
      padding: '2px 6px',
      fontSize: '12px'
    }
  }
};

const styles = {
  unseenBadge: {
    root: {
      color: 'white',
      background: 'red',
      borderRadius: '50%',
      padding: '2px 6px',
      fontSize: '12px'
    }
  }
};

Tell me if it helps

rahul•4w ago

No, it didn't work

empe•4w ago

message.txt

rahul•4w ago

which component should i use in this?

empe•4w ago

I think it's the unseenBadge Can you share all your notification center design code?

rahul•4w ago

I m trying in sandbox https://codesandbox.io/p/sandbox/novu-web-component-esm-rltcr5?file=%2Findex.js

empe•4w ago

Tell me how it's going

Gaming

Programming

How do I style the notification counter in web component?