Buttons

<oge-button> is a token-themed action button with semantic severities, three fill styles, badges and gesture superpowers (async actions, click guarding, hold-to-confirm, auto-repeat — see the Interactions page). Bind (clicked) for the guarded pipeline; every state is driven by design tokens, so dark mode and the bridge themes work out of the box.

severity stylingMode size badge hint useSubmitBehavior

Severities & styling modes

Five semantic severities (normal, accent, success, warning, danger) map straight to the design tokens, so every theme restyles them automatically. Each severity combines with three fill styles — contained (solid, the default), outlined and text — giving you the full action hierarchy of a page from one component.

severity stylingMode: contained | outlined | text

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeButton } from '@oge-ui/buttons';

@Component({
  selector: 'demo-root',
  imports: [OgeButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-button text="Contained" severity="accent" />
    <oge-button text="Outlined" severity="accent" stylingMode="outlined" />
    <oge-button text="Text" severity="accent" stylingMode="text" />
    <oge-button text="Success" severity="success" />
    <oge-button text="Warning" severity="warning" />
    <oge-button text="Danger" severity="danger" />
  `,
})
export class Demo {}

Sizes

Three presets — sm (28px), md (34px, default) and lg (42px). The scale is shared with the input editors, so a button placed next to a text box of the same size lines up pixel-perfect in form rows.

size: sm | md | lg

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeButton } from '@oge-ui/buttons';

@Component({
  selector: 'demo-root',
  imports: [OgeButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-button text="Small" size="sm" />
    <oge-button text="Medium" />
    <oge-button text="Large" size="lg" />
  `,
})
export class Demo {}

Icons

There is no icon-font dependency: project any inline SVG with the ogeButtonIcon attribute and it inherits the button's color. iconPosition places it before or after the label. Icon-only buttons must provide an accessible name via ariaLabel (or a hint tooltip).

[ogeButtonIcon] projection iconPosition

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeButton, OgeButtonIcon } from '@oge-ui/buttons';

@Component({
  selector: 'demo-root',
  imports: [OgeButton, OgeButtonIcon],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-button text="Download" severity="accent">
      <svg ogeButtonIcon viewBox="0 0 24 24" width="14" height="14" fill="none"
           stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
        <polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
      </svg>
    </oge-button>

    <!-- icon after the label -->
    <oge-button text="Next" iconPosition="after">
      <svg ogeButtonIcon viewBox="0 0 24 24" width="14" height="14" fill="none"
           stroke="currentColor" stroke-width="2" aria-hidden="true">
        <polyline points="9 18 15 12 9 6" />
      </svg>
    </oge-button>

    <!-- icon-only: give it an accessible name via hint -->
    <oge-button hint="Settings">
      <svg ogeButtonIcon viewBox="0 0 24 24" width="14" height="14" fill="none"
           stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="12" cy="12" r="3" />
      </svg>
    </oge-button>
  `,
})
export class Demo {}

Custom colors

The color input accepts any CSS color and overrides the severity palette for that one button — the hover shade and focus ring derive automatically. For brand-wide changes, override the --oge-* tokens instead: globally, per theme file, or inline on a single element.

[color] input per-instance token override

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeButton } from '@oge-ui/buttons';

@Component({
  selector: 'demo-root',
  imports: [OgeButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- any CSS color; the soft tint derives automatically -->
    <oge-button text="Purple" color="#7c3aed" />
    <oge-button text="Teal" color="#0d9488" stylingMode="outlined" />

    <!-- or override the design tokens per instance / theme-wide -->
    <oge-button
      text="Brand token"
      severity="accent"
      style="--oge-accent: #ea580c; --oge-accent-soft: rgba(234, 88, 12, 0.14)"
    />
  `,
})
export class Demo {}

Badges

A number or string renders a pill in the button's corner; numbers cap at 99+. The value joins the button's accessible name through a visually hidden span, so screen readers announce it. Passing true renders a plain attention dot instead.

badge: number | string | true (dot) 99+ capping

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeButton } from '@oge-ui/buttons';

@Component({
  selector: 'demo-root',
  imports: [OgeButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-button text="Inbox" [badge]="7" />
    <oge-button text="Alerts" [badge]="120" severity="accent" stylingMode="outlined" />
    <oge-button text="Live" [badge]="true" stylingMode="text" />
  `,
})
export class Demo {}

Notes

Bind (clicked), not native (click) — only the component output goes through clickGuard, the gestures and the single-flight action protection.
useSubmitBehavior renders type="submit" so the button submits its enclosing form; the default is always type="button".
Numeric badges join the accessible name via a visually hidden span; the dot variant is decorative (aria-hidden).
RTL needs no configuration — layout uses logical properties and follows the surrounding dir attribute.

Buttons

Severities & styling modes#

Sizes#

Icons#

Custom colors#