Bullet

Bullet is a colored dot: a status, a category or a priority, shown next to a label. It is a bare directive with no template — you write it as its own empty element. Think of it as the dot half of Badge: the same twelve schemes, the same two fills, without the content — a bullet and a badge of the same scheme share the same background tokens.

Minimal example

import { Component } from "@angular/core";
import { BulletComponent } from "@sinequa/galactik";

@Component({
  selector: "sample-component",
  imports: [BulletComponent],
  template: `
    <ul>
      <li class="flex items-center gap-2"><bullet scheme="success" size="sm" /> Indexed</li>
      <li class="flex items-center gap-2"><bullet scheme="warning" size="sm" /> Pending</li>
      <li class="flex items-center gap-2"><bullet scheme="error" size="sm" /> Failed</li>
    </ul>
  `,
})
export class SampleComponent {}

How it works

A bullet has no text, so on its own it says nothing to assistive technology — when the label next to it already names the status, that is correct: the dot is decoration, and stays out of the accessibility tree. Set aria-label only when the dot is the only indication of the state, and it renders role="img" with that accessible name.

pulse wraps the dot in an expanding, fading halo for a live "right now" status — a ::before on the dot itself, not a second element, so it stays a single boolean to toggle:

<bullet scheme="success" size="sm" pulse />
<bullet scheme="error" size="sm" [pulse]="hasAlert()" />

Options

Pitfalls

What's next