Button

Variants & sizes

Every combination of the four variants and five sizes.

<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>

Severity 21.9.0

severity says what the action means; variant says how loudly it is drawn. The two are orthogonal, so this is not a fifth variant — every cell below is a real combination, and a ghost delete is still a delete. "accent" is the default and the absence of a claim, which is why every other button on this page needs no opt-out.

Now switch the theme with the toggle in the header and look again. This grid is the best demonstration of the token layering the Theming guide describes, because three separate decisions are visible in it at once. A filled button's label is the colour its own theme states for that status, and it is stated per status rather than per theme: under primeng, success, warning and info carry a near-black label because white would be unreadable on those three, while danger keeps white because on that hue it is fine. Hover and press deepen the fill away from that label, so a state always makes the label easier to read rather than harder. And the outlined and ghost labels are not the raw status colour at all but that hue mixed halfway toward the page's ink, because as body text the raw hue clears WCAG AA in only five of the eleven shipped themes.

@for (severity of severities; track severity) {
  @for (variant of variants; track variant) {
    <gog-button [variant]="variant" [severity]="severity">{{ variant }}</gog-button>
  }
}

Press feedback, with animations off 21.9.0

Hold any of these down. The background deepens one step past its own hover, so the press reads even while the pointer is already hovering the button — and it is a state rather than a movement, which is the whole point. Turn on prefers-reduced-motion: reduce (DevTools → Rendering → Emulate CSS media feature) and the scale() goes away while the colour stays.

Until 21.9.0 the scale was the whole press, so a reader with animations off pressed a button and nothing happened at all. The ripple does not cover that case and is not meant to: it is off by default, and it is suppressed under reduced motion on purpose, because a ripple really is decoration and a press state is not. Override the colour per instance with --gog-button-press-bg / --gog-button-press-color, per theme with --gog-button-<variant>-active-bg, and retime or remove the movement with --gog-button-active-scale. Every other pressable surface in the library — menu items, chips, tab and accordion headers, button-toggle options, the three dropdowns' option rows — gained the same treatment in the same release.

<!-- Nothing to wire up: every variant presses. The tokens are the knobs. -->
<gog-button variant="primary">primary</gog-button>

<!-- One instance, its own press colour -->
<gog-button
  variant="primary"
  style="--gog-button-press-bg: var(--gog-danger-color); --gog-button-press-color: #fff"
>
  primary
</gog-button>

Disabled

One disabled button per variant — disabled state must stay legible on every color.

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

Loading

Loading swaps the label for a spinner and blocks clicks (via aria-disabled, not the native disabled attribute, so focus is preserved).

The spinner scales with the button size:

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

Full width

Stretches to fill its container; wrapped here in a narrower box to show it.

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

Icon-only

No visible label, so ariaLabel is required — it targets the inner <button>, unlike a plain aria-label attribute on <gog-button> itself.

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

ARIA state — a toggle and a disclosure

Same trap as ariaLabel, one step further: the component hides the real <button>, so [attr.aria-pressed] written on <gog-button> lands on the custom-element host — which has no role — and reaches no assistive tech at all. It compiles, throws nothing, and looks right, which is what makes it worth a demo. Use the inputs: ariaPressed, ariaExpanded, ariaControls and ariaHasPopup.

A toggle button now looks toggled21.9.0 — press "Mirror layout" and it keeps an inset ring (--gog-button-<variant>-toggled-shadow, width from --gog-button-toggled-ring-width) for as long as aria-pressed is "true" or "mixed". A ring rather than a fill, because hover and press already own the background and the state has to survive both. Until 21.9.0 it did not exist at all: a button could announce itself as on to a screen reader and look identical to an off one.

The region ariaControls points at. It stays in the document and hides, rather than being removed — aria-controls has to name an element that exists.

Inspect either button: the attribute sits on the inner <button>, never on <gog-button>. The off state renders aria-pressed="false" rather than dropping the attribute — null means "not a toggle button", false means "a toggle button that is off", and to a screen reader those are two different controls. [gogButton] needs none of these inputs: it styles an element you own, so write the attributes on your own <button> directly — and it draws the same toggled ring off the attribute you wrote.

<gog-button [ariaPressed]="isMirrored()" (gogClick)="toggleMirror()">
  Mirror layout
</gog-button>

<gog-button
  [ariaExpanded]="areFiltersOpen()"
  ariaControls="filters"
  ariaHasPopup="dialog"
  (gogClick)="toggleFilters()"
>
  Filters
</gog-button>

<div id="filters" [hidden]="!areFiltersOpen()">…</div>

Debounce guard

Clicks are throttled leading-edge: the first click fires immediately, further clicks are dropped for debounce ms (default 300). Click rapidly and watch the counter lag behind your clicks.

Accepted clicks: 0

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

Native type semantics

type is forwarded to the native <button>.

Neither button pressed yet.

<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>