Button

Name: ng-oat
Author: SashiKumar Yadav

Angular wrapper for Oat CSS buttons. Supports variants, styles, sizes, and icon-only mode.

Input	Type	Default	Description
`[variant]`	`'default' \| 'secondary' \| 'danger'`	`'default'`	Color variant
`[btnStyle]`	`'filled' \| 'outline' \| 'ghost'`	`'filled'`	Appearance style
`[size]`	`'default' \| 'small' \| 'large'`	`'default'`	Button size
`[icon]`	`boolean`	`false`	Icon-only mode (square)
`[type]`	`'button' \| 'submit' \| 'reset'`	`'button'`	HTML button type
`[disabled]`	`boolean`	`false`	Disabled state
`(clicked)`	`MouseEvent`		Click event

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatButton, NgOatSplitButton } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatButton, NgOatSplitButton],
  template: `
    <ng-oat-button variant="secondary" btnStyle="outline" (clicked)="onClick($event)">
      Click me
    </ng-oat-button>

    <ng-oat-split-button label="Save" (clicked)="onSave()">
      <button role="menuitem">Save as Draft</button>
      <button role="menuitem">Save & Close</button>
    </ng-oat-split-button>
  `,
})
export class ExampleComponent {
  onClick(e: MouseEvent) { console.log('Clicked', e); }
  onSave() { console.log('Saved'); }
}

Variants

html

<ng-oat-button>Primary</ng-oat-button>
<ng-oat-button variant="secondary">Secondary</ng-oat-button>
<ng-oat-button variant="danger">Danger</ng-oat-button>

Styles

html

<ng-oat-button>Filled</ng-oat-button>
<ng-oat-button btnStyle="outline">Outline</ng-oat-button>
<ng-oat-button btnStyle="ghost">Ghost</ng-oat-button>

Outline Variants

html

<ng-oat-button btnStyle="outline">Default</ng-oat-button>
<ng-oat-button btnStyle="outline" variant="secondary">Secondary</ng-oat-button>
<ng-oat-button btnStyle="outline" variant="danger">Danger</ng-oat-button>

Sizes

html

<ng-oat-button size="small">Small</ng-oat-button>
<ng-oat-button>Default</ng-oat-button>
<ng-oat-button size="large">Large</ng-oat-button>

Icon Buttons

html

<ng-oat-button [icon]="true" ariaLabel="Settings" size="small">⚙</ng-oat-button>
<ng-oat-button [icon]="true" ariaLabel="Close">✕</ng-oat-button>
<ng-oat-button [icon]="true" ariaLabel="Expand" size="large">⤢</ng-oat-button>

Disabled

html

<ng-oat-button [disabled]="true">Disabled</ng-oat-button>
<ng-oat-button btnStyle="outline" [disabled]="true">Disabled Outline</ng-oat-button>
<ng-oat-button variant="danger" [disabled]="true">Disabled Danger</ng-oat-button>

Button Group

Use Oat's menu.buttons class on a <menu> to visually group buttons together.

html

<menu class="buttons">
  <li><button>Left</button></li>
  <li><button>Center</button></li>
  <li><button>Right</button></li>
</menu>

Split Button

A primary action paired with a dropdown for secondary actions. Uses <ng-oat-split-button>.

Input	Type	Default	Description
`[label]`	`string`	required	Main button label
`[variant]`	`'default' \| 'secondary' \| 'danger'`	`'default'`	Color variant
`[btnStyle]`	`'filled' \| 'outline' \| 'ghost'`	`'filled'`	Appearance style
`[size]`	`'default' \| 'small' \| 'large'`	`'default'`	Button size
`[disabled]`	`boolean`	`false`	Disabled state
`(clicked)`	`MouseEvent`		Main button click

html

<ng-oat-split-button label="Save" (clicked)="save()">
  <button role="menuitem" (click)="saveAsDraft()">Save as Draft</button>
  <button role="menuitem" (click)="saveAndClose()">Save & Close</button>
  <button role="menuitem" (click)="saveAndNew()">Save & New</button>
</ng-oat-split-button>

<ng-oat-split-button label="Download" variant="secondary">
  <button role="menuitem">Download as PDF</button>
  <button role="menuitem">Download as CSV</button>
</ng-oat-split-button>

<ng-oat-split-button label="Delete" variant="danger">
  <button role="menuitem">Move to Trash</button>
  <button role="menuitem">Delete Permanently</button>
</ng-oat-split-button>

Split Button — Outline

html

<ng-oat-split-button label="Options" btnStyle="outline">
  <button role="menuitem">Option A</button>
  <button role="menuitem">Option B</button>
</ng-oat-split-button>

<ng-oat-split-button label="More" btnStyle="outline" size="small">
  <button role="menuitem">Action 1</button>
  <button role="menuitem">Action 2</button>
</ng-oat-split-button>