Atomic Angular — Doc interne
Buttons

Button

Restyle native <button> elements as a Galactik button — six variants, four sizes, icon-only mode — with no wrapper component and no change to native button behavior.

Button is a directive on the native button selector, not a wrapped component: importing it into a component's imports restyles every <button> that component's own template renders directly, while leaving type, disabled, form association and keyboard behavior exactly as the platform provides them.

Minimal example

A primary button
sample.component.ts
import { Component } from "@angular/core";
import { ButtonComponent } from "@sinequa/galactik";

@Component({
  selector: "sample-component",
  imports: [ButtonComponent],
  template: `<button variant="primary" (click)="onSave()">Save</button>`,
})
export class SampleComponent {
  onSave() {
    /* ... */
  }
}

How it works

variant / scheme / size / iconOnly / class computed variants() click, Space, Enter native (click) event Host component template ButtonComponent (directive on button) Native button host element User

Because there is no dedicated tag, ButtonComponent only activates on <button> elements the importing component's own template renders — a nested child component must import it itself too, exactly like any other Angular directive.

Recipes

Variants, sizes and icon-only

Every variant, size and an icon-only pair
button-gallery.component.ts
import { Component } from "@angular/core";
import { ButtonComponent, PlusIcon, TrashIcon } from "@sinequa/galactik";

@Component({
  selector: "button-gallery",
  imports: [ButtonComponent, PlusIcon, TrashIcon],
  template: `
    <div class="flex flex-wrap items-center gap-3">
      <button variant="primary">Primary</button>
      <button variant="secondary">Secondary</button>
      <button variant="tertiary">Tertiary</button>
      <button variant="accent">Accent</button>
      <button variant="light-accent">Light accent</button>
      <button variant="none" class="underline">None (unstyled)</button>
    </div>

    <div class="flex flex-wrap items-end gap-3">
      <button variant="primary" size="xs">Extra small</button>
      <button variant="primary" size="sm">Small</button>
      <button variant="primary" size="md">Medium</button>
      <button variant="primary" size="lg">Large</button>
    </div>

    <div class="flex flex-wrap items-end gap-3">
      <!-- A real variant + [iconOnly]="true" — variant="none" would strip size/iconOnly too, see Pitfalls. -->
      <button variant="tertiary" [iconOnly]="true" size="md" aria-label="Add item">
        <PlusIcon />
      </button>
      <button variant="secondary" [iconOnly]="true" size="lg" aria-label="Delete item">
        <TrashIcon />
      </button>
    </div>
  `,
})
export class ButtonGalleryComponent {}

Options

Prop

Type

This component has no outputs of its own — use the native (click) and other native button/keyboard events directly.

Pitfalls

What's next

Toggle

A pressed/unpressed pill, standalone or grouped into a segmented control.

Buttons

The button family — Button and the Toggle/ToggleGroup segmented control — and the variants they share.

Toggle

A pill-shaped pressed/unpressed button, standalone or grouped into a segmented control built on @angular/aria/toolbar.

On this page

Minimal exampleHow it worksRecipesVariants, sizes and icon-onlyOptionsPitfallsWhat's next