Button

Buttons trigger actions. All variants share .nf-button as the base class.

Variants

PRIMARY

<button class="nf-button nf-button-primary">INITIALIZE</button>

SECONDARY

<button class="nf-button nf-button-secondary">DISCARD</button>

GHOST

<button class="nf-button nf-button-ghost">QUERY</button>

DANGER

<button class="nf-button nf-button-danger">ABORT</button>

OUTLINE

<button class="nf-button nf-button-outline">SYSTEM</button>

Sizes

SMALL / DEFAULT / LARGE

<button class="nf-button nf-button-primary nf-button-sm">SMALL</button>
<button class="nf-button nf-button-primary">DEFAULT</button>
<button class="nf-button nf-button-primary nf-button-lg">LARGE</button>

Disabled

DISABLED STATE

<button class="nf-button nf-button-primary" disabled>OFFLINE</button>
<button class="nf-button nf-button-ghost" disabled>OFFLINE</button>

As anchor

Use a link when the control navigates. The classes style <a> the same way; keep it a link (no role="button"), because links and buttons have different keyboard and screen-reader behaviour:

<a href="/dashboard" class="nf-button nf-button-primary">
  ENTER SYSTEM
</a>

For actions, use a real <button type="button">.

Class reference

Class	Description
`nf-button`	Base — required on all buttons
`nf-button-primary`	Terminal Green fill
`nf-button-secondary`	Cyber Magenta fill
`nf-button-ghost`	Transparent, green border
`nf-button-danger`	Error color fill
`nf-button-outline`	Transparent, muted border
`nf-button-sm`	Small size
`nf-button-lg`	Large size
`nf-button-icon`	Square icon-only button