# Add custom information badge

In case you want to add some information badge on the ClickTopBar, you can use `useClickBadge()` hook to do it.

### `useClickBadge` structure

useClickBadge hook returns two functions: `setLeftBadge` and `setRightBadge`. Both are responsible to add info badge on specific ClickTopBar side. Each of these functions accepts the same set of parameters.\
Here the list of props for badge customization.

```tsx
export type BadgeSettings = {
        title: string;
        link?: string;
        color?: string;
        background: string;
   };
```

Here the example of having one badge with custom color, link and title on the left side of ClickTopBar:

```tsx
const ClickTopBar = ({ themeMode, onThemeSwitch }) => {

  const {setLeftBadge} = useClickBadge();

  setLeftBadge({
      title: `📄 Go to CSPR.click docs`,
      background: 'blue',
      color:'white',
      link: 'https://docs.cspr.click/'
  });

}
```

Then you should see the result: one left side badge with your own color, link and title. Like on the screen below:

<figure><img src="https://3734097225-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhC5Uysw6nW74MbPh3iNT%2Fuploads%2Fgit-blob-099ce3113fcf2e3667ab929214ee0c1998111202%2Fbadges-example.png?alt=media" alt=""><figcaption></figcaption></figure>

So, to create your own custom badge dynamically, all you need is to use `useClickBadge()` hook and call `setLeftBadge` or `setRightBadge` functions.