> For the complete documentation index, see [llms.txt](https://cause.evalink.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cause.evalink.io/modules-components/elements/badge-module.md).

# Badge Module

## Component

With the badge you can mark or highlight an element with a special meaning. A obvious example is the 'Coming soon' badge in the evalink marketplace.

*optional* @Input() **position**: [BadgePosition](/modules-components/elements/badge-module.md#badgeposition), *Default `BadgePosition.TopLeft`*

{% hint style="info" %}
*`The parent element needs to be set to`**`position: relative.`*** 
{% endhint %}

![Examples with the different position of the evalink-badge](/files/-MdMszJJLXy9udCB-yIx)

### Example

Import the `CauseBadgeModule` into the desired module as demonstrated in the following example:

{% tabs %}
{% tab title="some.module.ts" %}

```typescript
...
import { SomeComponent } from './some.component';
//Import from evalink cause
import { CauseBadgeModule } from '@evalink/cause';
...

@NgModule({
  declarations: [
   SomeComponent
  ],
  imports: [
    ...
    CauseCardModule,
    // Import the CauseBadgeModule into the module 
    CauseBadgeModule,
    ...
  ]
})
export class SomeModule {}
```

{% endtab %}

{% tab title="some.component.ts" %}

```markup
<cause-card class="relative">
    <cause-badge>Coming soon</cause-badge>
    ...
</cause-card>
```

{% endtab %}
{% endtabs %}

## Enums

### BadgePosition

```typescript
export enum BadgePosition {
  TopLeft = 'cause-badge--top-left',
  TopRight = 'cause-badge--top-right',
  BottomLeft = 'cause-badge--bottom-left',
  BottomRight = 'cause-badge--bottom-right',
}
```