# Badges
To use Badges, first import `SharedModule` in your module.
```typescript
import {SharedModule} from '@gaxon/modules';
@NgModule({
...
imports: [SharedModule, ...],
...
})
export class YourAppModule {
}
```
### Default Badges
{% tabs %}
{% tab title="Preview" %}
{% endtab %}
{% tab title="HTML" %}
#### By Component
```markup
Primary
Secondary
Success
```
#### By Directive
```markup
Primary
Secondary
Success
```
{% endtab %}
{% endtabs %}
### Link Badges
{% tabs %}
{% tab title="Preview" %}
{% endtab %}
{% tab title="HTML" %}
```markup
Primary
Secondary
Success
```
{% endtab %}
{% endtabs %}
### Pill Badges
{% tabs %}
{% tab title="Preview" %}
{% endtab %}
{% tab title="HTML" %}
```markup
Primary
Secondary
Success
```
{% endtab %}
{% endtabs %}