Buttons

The Neptuno button with the Luna neon pill style, built only from palette tokens. Click counts are local demo state.

Variants and sizes

primary (neptunoBlue, the Neptuno brand color) and secondary (mexicanPink) use the neon pill; quiet is the plain surface for low-emphasis actions.

`Button`

Actions and links. Hover lifts the pill, strengthens the glow, and sweeps a light sheen.

iOS

KRXButtonStyle (.primary / .secondary) KRXCore-iOS/Source/UIUX/Styles/ButtonStyle.swift

Visual style ported from Luna Web: Luna/Web/src/lib/components/ui/Button.svelte (sibling repository), re-expressed with Neptuno palette tokens instead of Tailwind arbitrary colors. iOS uses solid KRXButtonStyle fills; the neon pill is web-only for now.

Interactive example

States

Current value object

{
  "lastAction": null,
  "clicks": {}
}

Usage

<Button onclick={save}>Save</Button>
<Button variant="secondary" onclick={preview}>Preview</Button>
<Button variant="quiet" onclick={cancel}>Cancel</Button>

Platform differences

Light-only: the dark navy fill comes from --color-interstelar-space and stays dark on the light background, as in Luna.
Pill radius follows Luna; iOS KRXButtonStyle uses a 10 pt radius and a 5 pt border.
Hover effects only apply on devices that hover; touch gets the pressed state.

Icons and motion

arrow-right and chevron-right play the Luna swoosh: on hover, while pressed on touch, and on keyboard focus. Reduced-motion users get a static icon.

`Button (icon)`

Leading or trailing icon from the shared icon set.

iOS

KRXButtonStyle (.primary / .secondary) KRXCore-iOS/Source/UIUX/Styles/ButtonStyle.swift

iOS passes an SF Symbol via Button(title, systemImage:).

Interactive example

Current value object

{
  "lastAction": null
}

Usage

<Button icon="arrow-right" onclick={next}>Continue</Button>
<Button variant="secondary" icon="plus" iconPosition="leading">Add employee</Button>

Platform differences

Luna starts the swoosh after a 420 ms long press on touch; Neptuno plays it on :active without timers.

Module accents

Each module keeps its identity color from Widget.ModuleType. Pass its palette token as accent; the colors come from the palette module map, not new values.

`Button (accent)`

The neon pill re-tinted with a module color.

iOS

Widget.ModuleType.color iOS/Shared/Modules/Dashboard/Widget.swift

Interactive example

Current value object

{
  "lastAction": null
}

Usage

<!-- Finances: Widget.ModuleType.finances.color -->
<Button accent="--color-green-1" icon="plus" iconPosition="leading">New expense</Button>

Platform differences

accent only accepts --color-* palette tokens, so module screens stay on-palette.

Links

With href, the button renders a link resolved against the SvelteKit base path. A disabled link renders as a disabled button.

`Button (href)`

Navigation styled as a button.

iOS

iOS navigates with NavigationLink + CardLink; this is the web equivalent for page-level navigation.

Interactive example

Data fields Color palette

Current value null

null

Usage

<Button href="library/data-fields" icon="arrow-right">Data fields</Button>
<Button href="palette" variant="quiet">Color palette</Button>

Platform differences

href is a typed SvelteKit Path without a leading slash.