---
title: Indicator
category: components
b2c: true
expert: true
stable: done
alias: badge
a1: true
---

The indicator is a small badge that can be used to mark an element or page as unread for the user.

<!-- example(indicator) -->

### Usage inside other components

The indicator can be placed inside other components. You are free to position the indicator as needed with css or use `position` input to turn on one of our positioning presets. Note, that since most of our presets rely on absolute positioning, you might need to add `position: relative` style to the container element of indicator for best results. Here are a few examples.

#### Action

<!-- example(action-indicator) -->

#### Context Menu

<!-- example(context-menu-indicator) -->

#### Icon Button

<!-- example(button-icon-indicator) -->

<div class="docs-expert-container">

#### Tabs

Please note that **this is an Expert styling option**. This means that the indicator position is currently only defined for internal applications and not for applications that are client facing.

<!-- example(tabs-with-indicator) -->

This is also possible with the navigation bar:

<!-- example(tabs-nav-bar-with-indicator) -->

</div>
