> For the complete documentation index, see [llms.txt](https://docs.cspr.click/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cspr.click/cspr.click-sdk/integration/legacy-csprclick-ui/customizing-the-top-bar/adding-custom-badge.md).

# 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="/files/594SpWNJTZT5FV9Sh3qJ" 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.