Button

Overview

Import the component and drop it into a template.

import { ButtonComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [ButtonComponent],
})

Basic usage — a primary button that reacts to a click:

<gog-button variant="primary" (gogClick)="onClick($event)">
  Click me
</gog-button>

No button clicked yet.

Examples

<gog-button variant="primary" size="md">Primary</gog-button>
<gog-button variant="secondary" size="md">Secondary</gog-button>
<gog-button variant="outline" size="md">Outline</gog-button>
<gog-button variant="ghost" size="md">Ghost</gog-button>

<gog-button variant="primary" [disabled]="true">Primary</gog-button>

<gog-button
  variant="primary"
  [loading]="isLoading()"
  (gogClick)="simulateLoading()"
>
  Simulate loading
</gog-button>

<gog-button variant="outline" [fullWidth]="true">Full width</gog-button>

<gog-button variant="primary" ariaLabel="Confirm">
  <gog-icon name="check" />
</gog-button>

<gog-button variant="primary" [debounce]="300" (gogClick)="onSpamClick()">Click me fast</gog-button>

<form (submit)="onFormSubmit($event)" (reset)="onFormReset()">
  <gog-button variant="primary" type="submit">Submit</gog-button>
  <gog-button variant="outline" type="reset">Reset</gog-button>
</form>

Links that look like buttons — [gogButton]21.4.0

gog-button renders its own <button>, so it can never be a link. The directive inverts that: the element stays yours and [gogButton] only gives it the look.

import { GogButtonDirective } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [GogButtonDirective],
})

<a gogButton routerLink="/general/theming">See theming</a>
<a gogButton variant="ghost" href="https://example.com" target="_blank" rel="noreferrer">
  Docs
</a>
<button gogButton variant="outline" size="sm" type="submit">Save</button>
<a gogButton fullWidth routerLink="/components/table">Checkout</a>

The selector is a[gogButton], button[gogButton] — deliberately not a bare [gogButton]. On a <div> the result would look like a button while being invisible to the keyboard and to assistive technology.

Which one to reach for

The component when the button acts on the page: it owns loading (a centred spinner it projects), debounce click throttling and the gogClick output — none of which a bare element can provide. The directive when the element must be a link, or must keep directives of its own. routerLink, href, target, download, type="submit" and the rest keep working because they were never brokered through an input in the first place.

That is also why the library still has no @angular/router dependency — a design point, not an omission. A component that took a routerLink input would force the router on every app that installs the package.

Two things the directive deliberately does not do: no disabled on an <a> (there is no such thing — drop the href or render a real <button>), and no loading state (the spinner is a projected child, which a directive cannot add without taking over the element's content).

Its styles live in the global styles/button.css, pulled in by index.css, because Angular's emulated encapsulation could never reach an element declared in your template. Nothing changes in your setup — see Theming.

[gogButton] — Inputs

API Reference

Inputs

Outputs

Styling Tokens

Every CSS custom property the button paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.