# Add custom information badge

In case you want to add some information badge on the ClickTopBar, you can use `useClickBadge()` hook to do it. You need to import it from csprclick library

```tsx
import { useClickBadge } from '@make-software/csprclick-ui';
```

### `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://4098787943-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMwTFKCda4irtFhY9tqGt%2Fuploads%2Fgit-blob-099ce3113fcf2e3667ab929214ee0c1998111202%2Fbadges-example.png?alt=media" alt=""><figcaption></figcaption></figure>

To remove the badge but keep it ready to use in codebase you can add `null` as parameter

```tsx
    setLeftBadge(null);
```

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