Badge
A small pastille apposed on another element — a numeric counter or a status icon — glued on with your own positioning.
Badge is a small pastille apposed on another element — a numeric counter (notifications, result counts) or a
status icon (online, verified, featured). It is a bare directive with no template: it only contributes host
classes (and, optionally, ARIA attributes) to whichever tag you write it on.
Minimal example
import { Component } from "@angular/core";
import { BadgeComponent } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [BadgeComponent],
template: `<badge variant="number" scheme="error">3</badge>`,
})
export class SampleComponent {}How it works
variant="number" gives breathing-room padding and a minimum width equal to the row height, so it grows into
a pill past one or two digits. variant="icon" forces a square aspect ratio, meant for a single icon child.
Neither variant carries any positioning of its own — gluing a badge onto another element (a status dot on an
Avatar, an unread count on a tab) is your own relative/absolute wrapper:
import { Component } from "@angular/core";
import { AvatarComponent, AvatarImageComponent, AvatarFallbackComponent, BadgeComponent, CircleCheckIcon } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [AvatarComponent, AvatarImageComponent, AvatarFallbackComponent, BadgeComponent, CircleCheckIcon],
template: `
<div class="relative inline-block">
<avatar size="large">
<AvatarImage src="https://i.pravatar.cc/150?img=5" alt="Jane Doe" />
<AvatarFallback>JD</AvatarFallback>
</avatar>
<badge
variant="icon"
scheme="success"
aria-label="Online"
class="absolute -bottom-0.5 -right-0.5 ring-2 ring-(--bg-neutral-white)"
>
<CircleCheckIcon />
</badge>
</div>
`,
})
export class SampleComponent {}Options
Prop
Type